Skip to main content
The Autocomplete component requires a Flux Pro license. Learn more about Flux Pro.

​
Overview

The Autocomplete component provides intelligent search functionality with real-time suggestions, filtering, and keyboard navigation. It seamlessly integrates with Livewire for dynamic data fetching and offers a polished user experience for finding and selecting options.

​
Basic Usage

Create a simple autocomplete input: 
<flux:autocomplete
    wire:model="selectedUser"
    :options="$users"
    placeholder="Search users..."
/>
Implement server-side search with real-time filtering: 
<flux:autocomplete
    wire:model="userId"
    wire:search="searchUsers"
    placeholder="Find a user..."
    :options="$searchResults"
/>

class UserSelector extends Component
{
    public $userId;
    public $searchResults = [];
    
    public function searchUsers($query)
    {
        $this->searchResults = User::where('name', 'like', "%{$query}%")
            ->limit(10)
            ->get()
            ->map(fn($user) => [
                'value' => $user->id,
                'label' => $user->name,
            ]);
    }
}

​
Custom Display

Customize how options are displayed: 
<flux:autocomplete wire:model="productId" wire:search="searchProducts">
    @foreach($products as $product)
        <flux:autocomplete.option :value="$product->id">
            <div class="flex items-center gap-3">
                <img src="{{ $product->image }}" class="w-8 h-8 rounded" />
                <div>
                    <div class="font-medium">{{ $product->name }}</div>
                    <div class="text-sm text-gray-500">${{ $product->price }}</div>
                </div>
            </div>
        </flux:autocomplete.option>
    @endforeach
</flux:autocomplete>

​
Multiple Selection

Allow users to select multiple items: 
<flux:autocomplete
    wire:model="selectedTags"
    :options="$availableTags"
    multiple
    placeholder="Add tags..."
/>

​
With Grouping

Organize suggestions into categories: 
<flux:autocomplete wire:model="contactId">
    <flux:autocomplete.group label="Team Members">
        @foreach($teamMembers as $member)
            <flux:autocomplete.option :value="$member->id">
                {{ $member->name }}
            </flux:autocomplete.option>
        @endforeach
    </flux:autocomplete.group>
    
    <flux:autocomplete.group label="External Contacts">
        @foreach($externalContacts as $contact)
            <flux:autocomplete.option :value="$contact->id">
                {{ $contact->name }}
            </flux:autocomplete.option>
        @endforeach
    </flux:autocomplete.group>
</flux:autocomplete>

​
Use Cases

User Search

Find and select users from a large database without loading all records at once.

Product Finder

Help customers quickly locate products by name, SKU, or category.

Tag Input

Allow users to add multiple tags with autocomplete suggestions.

Location Search

Search for addresses, cities, or places with real-time suggestions.

​
Features

​
Smart Filtering

  • Real-time search as users type
  • Debounced server requests to reduce load
  • Fuzzy matching for better results

​
Keyboard Navigation

  • Arrow keys to navigate suggestions
  • Enter to select highlighted option
  • Escape to close dropdown
  • Tab for focus management

​
Performance

  • Lazy loading for large datasets
  • Virtual scrolling for thousands of options
  • Efficient re-rendering with Livewire

​
Accessibility

The Autocomplete component follows ARIA best practices:
  • role="combobox" for proper screen reader support
  • aria-autocomplete and aria-expanded attributes
  • aria-activedescendant for keyboard navigation
  • Clear focus indicators and keyboard support
Use autocomplete instead of long dropdowns when you have more than 10-15 options. It provides a much better user experience for finding specific items.