Basic search select

The most common a Livewire autocomplete is used for is creating a searchable select input.

This means that results can be shown and filtered based on what the user has typed in the input.

As an example, lets create a user search select, which will allow us to search through existing users and select one of them.

#Component

#Blade view

<x-autocomplete auto-select wire:model.live="userId">
    <x-autocomplete.input wire:model.live="search" :disabled="$userId">
        <x-autocomplete.clear-button />
    </x-autocomplete.input>
 
    <x-autocomplete.list class="max-h-56">
        @foreach ($this->users as $user)
            <x-autocomplete.item :key="$user->id" :value="$user->name">
                {{ $user->name }}
            </x-autocomplete.item>
        @endforeach
    </x-autocomplete.list>
</x-autocomplete>

#Component class

use App\Models\User;
use Livewire\Attributes\Computed;
use Livewire\Component;
 
class UsersList extends Component
{
    public $search = '';
    public $userId = null;
 
    #[Computed]
    public function users()
    {
        return User::orderBy('name')
            ->when(
                $this->search,
                fn ($query, $value) => $query->where('name', 'like', "%{$value}%")
            )
            ->get();
    }
}

#Screenshots

#Searching for a user

#User selected