Search code examples
phplaravellaravel-livewire

My live search using livewire is not working

I am doing a live search on livewire, my search term is already binded with the livewire controller, but when I add it to the where clause in render function, it still displays all the data on the table not the one i am searching. I tried replacing the searchterm with a string as keyword in LIKE and it works. It seems that i can't use the input in searchterm as a keyword in the where clause.

here is my controller;

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Item;
use Livewire\WithPagination;

class Items extends Component
{
    use WithPagination;
    public $searchTerm;

    public function render()
    {
        $select = Item::where('itemName', 'LIKE', '%' . $this->searchTerm . '%')->paginate(6);
        return view('livewire.items', ['items' => $select]);
    }
}

this is my view

<div class="row browse mt-6">
    <div class="col float-left category ">
        <h4 class="float-left font-weight-bold">All Categories</h4> 
        <h4 class="float-left font-weight-bold">Men</h4>  
        <h4 class="float-left font-weight-bold">Women</h4> 
    </div>
    <div class="col search-cat float-right">
        <input type="text"  id="search" placeholder="Browse Products" wire:model="searchTerm"/>
    </div>
    {{$searchTerm}}
</div>
<hr style="border-top: dotted 1px;" />

<div class="row w-100 p-1">
    <table class="table-center">
        <tbody>
        <div>
        @foreach($items as $item)
        <tr class="mx-auto">
            <div class="d-inline w-30 item-desc mx-auto m-1">
                <h4 class="pt-1">{{ $item->itemName }}</h4>
                <div class="">
                    <img src="items/{{ $item->itemPic }}.png" alt="" class="item-pic">
                </div>
                <div class="row">
                    <div class="col d-inline float-left">
                        Price: US ${{ $item->itemPrice }}
                    </div>
                    <div class="col d-inline float-right">
                        {{ $item->itemCOD }}</td>
                    </div>
                </div>
            </div>
            
        </tr>
        </tbody>
        @endforeach
        </div>
       
        <hr style="border-top: dotted 1px;" />  
        <div class="pagination-content">
            {{ $items->links('pagination::pagination-custom') }}
        </div>  
        <hr style="border-top: dotted 1px;" />  
       
   </table>
</div>
Solution

  • There's two things here that could potentially cause problems,

    1. Your tr element does not have wire:key, the value to wire:key must be unique across the entire page
    2. Your view consists of multiple root elements (if this is your entire view), these are the three root-elements in your view - and in Livewire, its very important that the view only has one root element.
      • <div class="row browse mt-6">
      • <hr style="border-top: dotted 1px;" />
      • <div class="row w-100 p-1">

    Also, as a sidenote, your loop also closes the tbody tag, which is odd, so I moved that out of the loop. It also doesn't quite make sense to put divs and hrs inside the table tag, those should probably be outside of the tabletag.

    Here's the updated view, with wire:key on the tr and with the whole view wrapped in one div,

    <div>
    <div class="row browse mt-6">
        <div class="col float-left category ">
            <h4 class="float-left font-weight-bold">All Categories</h4> 
            <h4 class="float-left font-weight-bold">Men</h4>  
            <h4 class="float-left font-weight-bold">Women</h4> 
        </div>
        <div class="col search-cat float-right">
            <input type="text"  id="search" placeholder="Browse Products" wire:model="searchTerm"/>
        </div>
        {{$searchTerm}}
    </div>
    <hr style="border-top: dotted 1px;" />

    <div class="row w-100 p-1">
        <table class="table-center">
            <tbody>
                <div>
                    @foreach($items as $item)
                        <tr class="mx-auto" wire:key="item-{{ $item->id }}">
                            <div class="d-inline w-30 item-desc mx-auto m-1">
                                <h4 class="pt-1">{{ $item->itemName }}</h4>
                                <div class="">
                                    <img src="items/{{ $item->itemPic }}.png" alt="" class="item-pic">
                                </div>
                                <div class="row">
                                    <div class="col d-inline float-left">
                                        Price: US ${{ $item->itemPrice }}
                                    </div>
                                    <div class="col d-inline float-right">
                                        {{ $item->itemCOD }}</td>
                                    </div>
                                </div>
                            </div>
                        </tr>
                    @endforeach
                </div>
            </tbody>
                    
            <hr style="border-top: dotted 1px;" /> 
            
            <div class="pagination-content">
                {{ $items->links('pagination::pagination-custom') }}
            </div>  

            <hr style="border-top: dotted 1px;" />  
        </table>
    </div>
</div>

    Have a look at this resource from the official Livewire docs,