Laravel Livewire Select Search Dropdown Not Working

I have a form in the Laravel Livewire project and try to search and select users from the database. When I search User then search results in users, but nothing to select. Also, no error showing just page refresh. my code is below: I'm trying this

livewire component view
<div class="col-md-4">
    <div class="form-group row">
        <label class="control-label col-md-2 col-sm-2">Select User</label>
        <div class="col-md-10 col-sm-10 ">
            <div>
                <select wire:model="user_id" class="form-control" name="user_id" required>
                    <option></option>
                    @foreach($users as $user)
                        <option value="{{$user->id}}">{{$user->username}} : {{ $user->fullname }}</option>
                    @endforeach
                </select>
            </div>
            <div style="position:relative">
                <input wire:model.debounce.500ms="inputsearchuser" class="form-control relative" type="text"
                       placeholder="search..."/>
            </div>
            <div style="position:absolute; z-index:100">
                @if(strlen($inputsearchuser)>2)
                    @if(count($searchusers)>0)
                        <ul class="list-group">
                            @foreach($searchusers as $searchuser)
                                <li class="list-group-item list-group-item-action">
                                    <spanwire:click
                                    ="selectuser({{$searchuser->id}},{{$searchuser->terms}})">{{$searchuser->username}}
                                    : {{$searchuser->fullname}}</span>
                                </li>
                        </ul>
                        @endforeach
                    @else
                        <li class="list-group-item">User Not Found...</li>
                    @endif
                @endif
            </div>
        </div>
    </div>
</div>
livewire component
class MyLiveWireComponent extends Component
{
    public $j = 1;
    public $users = [];

    public $inputsearchuser = '';
    public $user_id;

    public function selectuser($user_id,$terms)
    {
        $this->user_id = $user_id;
$this->terms = $terms;
        $this->inputsearchuser = '';
    }

    public function render()
    {
        $searchusers = [];
        if (strlen($this->inputsearchuser) >= 2) {
            $searchusers = User::Where('username', 'LIKE', '%' . $this->inputsearchuser . '%')
                ->get();
        }
        return view('livewire.admin.orders.add-order', ['searchusers' => $searchusers])->layout('components.layouts.admin');
    }
}
4

3 Answers

Change this:

<spanwire:click="selectuser({{$searchuser->id}},{{$searchuser->terms}})"> 
{{$searchuser->username}} : {{$searchuser->fullname}}
</span>

To:

<span wire:click.prevent="selectuser({{$searchuser->id}},{{$searchuser->terms}})"> 
{{$searchuser->username}} : {{$searchuser->fullname}}
</span>
1

Your component should have a single-level root element only. Also, add wire:key in your element inside of the loop.

      <ul class="list-group">
           @foreach($searchusers as $key => $searchuser)
                <li wire:key="{{'users'.$key}}" class="list-group-item list-group-item-action">
                    <span wire:click="selectuser({{$searchuser->id}},                        
                    {{$searchuser->terms}})">{{$searchuser->username}}
                    : {{$searchuser->fullname}}</span>
                 </li>
            @endforeach
      </ul>

Did you change it to wire:click.prevent as suggested above? Otherwise, it does not prevent the default action from occurring, and can cause that exact behavior.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Maya Lin-Takahashi

Maya Lin-Takahashi

Consumer Tech & Gadget Reviewer

Maya is a hardware enthusiast who tests and reviews smart home devices, smartphones, wearables, and audio gear. She focuses on practical consumer value and build quality.

Share this article
Twitter Facebook Pinterest