Laravel-Livewire search

In this article, I will be showing you how you can add dynamic search functionality to your Laravel App. We will be using Livewire. Livewire is a full-stack framework for Laravel and it lets you build dynamic interfaces.

It’s not like anything you’ve seen before. The best way to understand it is to just look at the code. Strap on your snorkel, we’re diving in.

By using just Laravel, it is possible to have the search functionality but if you want it to be dynamic and by dynamic I mean, display search results as the user types in the input, Livewire can be the go-to and it does a pretty good job.

I have already created a Laravel application that is connected to a database and has a simple search feature implemented. Users have to press the search button to retrieve results. With Livewire we can show search results to the users as they are typing.

Install Livewire 🚀

The first thing we need is to get Livewire installed in our application. If you go to their documentation page, we need this line to install livewire.

composer require livewire/livewire

Then we can create a component using the following artisan command.

php artisna make:livewire SearchDropdown

Once you’ve run the above commands, you will have two new files created: searchDropdown.php and search-dropdown.blade.php.

The searchDropdown.php will be our component and that component will render a view template, search-dropdown.blade.php. And once you have your component as you like, you can easily add it to any page or part of your website.

Setting up the component

Before we even move any further, let’s fix something that may give us a headache if we forget, (Trust me I spent hours on StackOverflow because of this 😅) or as we will get into later, why the wire:model is not binding data.

In your app.blade.php, just before the closing body tag, add this:

The problem you’ll see if you forget this is that when you type into the search input, there won’t be any live updates of the search results, and we want to be able to see results from the database as we type.

The component

So now, let go into our component, inside the class, create a variable to hold whatever the user is going to type, and set it to an empty string.

Then in the render function, create an empty array, you can name it anything but it will hold the results of the query.

Then you can assign the results variable to whatever the query returns. For a simple search you can do this:

$results = TNAME::where(COL_NAME, 'LIKE', '%' . $this->search . '%')->get();

TNAME — is the table where you want to perform the search e.g. posts, articles, users.

COL_NAME — is the column name e.g. title, slug, author.

And then return the view with the results:

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

All of it together will look like this:

namespace App\Http\Livewire;
use Livewire\Component;
use App\TNAME;
class SearchDropdown extends Component
{
    public $search = '';
    public function render() {
        $results = [];
        if(strlen($this->search) >= 3){
            $results = TNAME::where(COL_NAME, 'LIKE', '%' . $this->search . '%')->get();
        }

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

I also have an if statement check before querying the database, just to make sure the user has typed in something before we can query the database.

Displaying the results

Now in the view, we want to loop through the results and display each one of them. You can design your search dropdown template however you like, but essentially you will need an input and an unordered list.

In the unordered list, using a foreach loop, we can iterate the results and display them, and then redirect to another page using the id.

Few important things here, if you look at the input, we have

wire:model.debounce.500ms="search"

this is what makes the data binding possible and the debounce.500ms is how long it will take for the results to be displayed. By default, it’s 150ms but you can adjust to your liking. However, if you are making calls to API to get the results, then it’s better to change the default because you don’t want to make a call one or two keystrokes the user makes. Also, the search in quotes here is the variable we defined in the component class.

That is it. Your search functionality should be dynamic. Thanks for reading, I hope you found this helpful.