Autocomplete Search Component using Livewire
Tech Stack: tailwindcss, new, livewire
To include the search box on your page or navigation you just have to include the livewire component.
In this demonstration, we are using Spatie Searchable package for our search operation.
You must install it first.
Preparing your Model
composer require spatie/laravel-searchable
In this demonstration, I performed a search on a Model named DummyProduct as shown in the DummyProuct tab. In order to search through models you'll have to let them implement the Searchable interface.
You'll only need to add a
getSearchResult method to each searchable model that must return an instance of SearchResult.
Livewire Component code is simple, we have utilized the updated hook on the keyword variable. Thus whenever the user types in the keyword, Livewire components runs a query on the database to gather the results.
We then run through the results on the front end.