Searchable Select and Autocomplete in Livewire (No JS Framework)
A plain <select> is fine for ten options. Past that, users want to type to filter. Building a searchable select or autocomplete that is keyboard-accessible and async-friendly is surprisingly fiddly — so this guide shows how to do it in Livewire and Alpine.js without reaching for React or Vue.
Searchable select vs autocomplete
They look similar but solve different problems:
- A searchable select filters a known list of options as you type (e.g. pick a country).
- An autocomplete queries a data source as you type and suggests matches (e.g. search users by name).
Aura UI ships both. The autocomplete component is built for the async case:
<x-aura::autocomplete
wire:model="userId"
:options="$this->results"
placeholder="Search users..."
wire:keydown.debounce.300ms="searchUsers"
/>
On the Livewire side you filter server-side as the query changes:
public string $query = '';
public ?int $userId = null;
public function getResultsProperty(): array
{
return User::query()
->where('name', 'like', "%{$this->query}%")
->limit(10)
->pluck('name', 'id')
->all();
}
Because filtering happens in a Livewire action, you can search across millions of rows with a real database query — something a purely client-side widget cannot do.
The accessibility details that matter
A good combobox supports arrow-key navigation through results, Enter to select, Escape to close, and announces the active option to screen readers via aria-activedescendant. These are exactly the parts developers skip when rolling their own — and exactly what the Aura components handle for you, as part of a WCAG-minded set.
For a fixed list, use a searchable select
If your options are known up front, the select component with search enabled avoids the server round-trip entirely and filters in the browser. Same accessible behaviour, no backend query needed.
Get started
composer require bluestarsystem/aura-ui
php artisan aura:install
Both components are in the free tier. To see them working inside a complete interface, explore the free dashboard starter or browse the full component catalogue.
