Autocomplete Search Component using Livewire

Usage

To include the search box on your page or navigation you just have to include the livewire component.

@livewire('search-component')

Documentation

In this demonstration, we are using Spatie Searchable package for our search operation.

You must install it first.

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.