Mahmoud Al-HabashOpen to new projects
  • WorkWork
  • ServicesServices
  • LabLab
  • WritingWriting
  • ContactContact
Amman--:--عربي
Writing/Livewire

Building an Autocomplete with Livewire v4

Create a searchable autocomplete dropdown.

1 February 20261 min readLivewireاقرأ بالعربية

On this page

  1. Component

Build an autocomplete component.

Component

php
@php
new class extends Livewire\Component {
    public string $query = '';
    public ?int $selectedId = null;
    public bool $showResults = false;
    
    #[Computed]
    public function results(): Collection
    {
        return strlen($this->query) >= 2
            ? User::where('name', 'like', "%{$this->query}%")->take(5)->get()
            : collect();
    }
    
    public function select(int $id, string $name): void
    {
        $this->selectedId = $id;
        $this->query = $name;
        $this->showResults = false;
    }
}
@endphp
All articles

Keep reading

  • Authorization in Livewire v4 Components1 February 20261 min read
  • Blaze Pre-Compiler: Massive Performance Gains in Livewire v41 February 20261 min read
  • Building a Bookmark Feature with Livewire v41 February 20261 min read