Building an Instant Search with Laravel Livewire and Laravel Scout

March 8th, 2023 Laravel

Building an Instant Search with Laravel Livewire and Laravel Scout

Laravel Livewire is a full-stack framework for Laravel that makes it easy to build dynamic, responsive, and user-friendly interfaces using Laravel and PHP. It allows you to create components that can be rendered on the front-end and interact with data from the server without requiring a page refresh.

Laravel Scout is a library that provides a simple and intuitive way to add full-text search to your Laravel applications. It uses a driver-based approach, which allows you to easily switch between different search engines, such as Algolia or Elasticsearch.

In this article, we will show you how to use Laravel Livewire and Laravel Scout to build an instant search that allows users to search a dataset in real-time as they type.

Implementing Instant Search with Livewire and Scout

To implement instant search with Livewire and Scout, we will create a Livewire component that allows users to search a dataset of users.

php artisan make:livewire SearchUsers

The component will use the search method provided by Laravel Scout to search the users index and paginate the results using the paginate method provided by the WithPagination trait.

Here is the code for the SearchUsers Livewire component:

class SearchUsers extends Component
{
    use WithPagination;

    public $search;

    public function mount()
    {
        $this->search = request()->query('search', '');
    }

    public function render()
    {
        $users = User::search($this->search)->paginate(10);

        return view('livewire.search-users', [
            'users' => $users,
        ]);
    }
}

In this code, we define a SearchUsers Livewire component that has a $search property and two methods: mount and render. The mount method is called when the component is first rendered on the page, and it is used to get the search query parameter from the request and initialize the $search property.

The render method is used to render the component's view, which in this case is a livewire.search-users view that displays the search results. To get the search results, we use the search method provided by Laravel Scout to search the users index and then paginate the results using the paginate method provided by the WithPagination trait.

Building the Search Input and Displaying the Results

In the livewire.search-users view, we can use the $search property and the update method provided by Livewire to build the search input and update the search results in real-time as the user types:

<input type="text"
       wire:model="search"
       placeholder="Search users"
>

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        @foreach($users as $user)
            <tr>
                <td>{{ $user->name }}</td>
                <td>{{ $user->email }}</td>
            </tr>
        @endforeach
    </tbody>
</table>

{{ $users->links() }}

In this code, we use the wire:model directive to bind the search input to the $search property of the Livewire component. This allows the input to update the $search property in real-time as the user types, which in turn triggers the render method and updates the search results.

We then use a foreach loop to loop over the $users array and display each user's name and email in a table. Finally, we use the $users->links() method to generate pagination links for the search results.

Conclusion and Next Steps

In this article, we showed you how easy it is to buield an instant search with Laravel Livewire and Laravel Scout.

Next, you can experiment with different search engines and customization options provided by Laravel Scout to further enhance the search functionality in your applications. You can also explore other features and capabilities of Laravel Livewire to build even more dynamic and interactive interfaces in your Laravel projects.