How To Create Search Functionality using Laravel Livewire?

How to build a search function using Laravel Livewire

This article assumes you already know how to create a new Laravel project with Laravel Livewire installed. If you arent’ already familiar with the same, I suggest you read this quick article first.

This post also assumes that you have already hooked your newly created Laravel Livewire project to a MySQL db and the users table have some data in it.

When you run your fresh Laravel app, after connecting it to the database and after logging in, you should see something like this:

Logged-in view of the freshly-created Laravel app

Ok, so, now that we have a fresh Laravel 8.0 project to build upon our Livewire search functionality, let’s begin by creating a couple of Livewire components.

The first component that we will be creating is the SearchDropdown. In order to create the component, go to the terminal and type the following command:

php artisan make:livewire SearchDropDown

This will create 2 files. The view file and the Component file (a lot like a Controller file) in the locations as seen in the image below:

SearchDropDown component created inside the Project directory

Now, to be able to use Livewire inside our project, we have to reference the Livewire scripts and stylesheets. In order to do that, open your Views\layouts\app.blade.php, and just before the end of the </head> tag, paste the following:

@livewireStyles()

Now, scroll towards the bottom of the page, and right before the closing </body> tag, place the following code:

@livewireScripts()

And we are now ready to use Livewire in our project.

Designing The LiveWire Component View

The component here in our case will just be our search dropdown.

Open Views\livewire\search-drop-down.blade.php file and paste the following code inside the only <div> in the file, and save it:

<div class="relative p-2">
    <input
        type="text"
        class="form-input w-full"
        placeholder="Search Contacts..."
        wire:model="term"
    />

    <div wire:loading class="absolute w-1/3 bg-white rounded-lg shadow">
        {{-- <div class="list-item">Searching...</div> --}}
        <ul class="divide-y-2 divide-gray-100">
            <li class="p-2 hover:bg-blue-600 hover:text-blue-200 ">
                Searching...
            </li>
        </ul>
    </div>

    @if(!empty($term))
        <div class="w-1/3 bg-white rounded-lg shadow">
            @if(!empty($users))
                <ul class="divide-y-2 divide-gray-100">
                    @foreach($users as $i => $user)
                        <li class="p-2 hover:bg-blue-600 hover:text-blue-200">
                            <a
                                href="https://www.google.com"
                                class="padding-top-5 list-item {{ $highlightIndex === $i ? 'highlight' : '' }}"
                            >{{ $user['name'] }}</a>
                        </li>
                    @endforeach
                </ul>
            @else
                <div class="list-item">No results!</div>
            @endif
        </div>
    @endif
</div>

The view part of our component is ready. But if you refresh your dashboard page of the project, you will not see anything there yet. This is because we have created the component but have not yet added it to our dashboard view.

Let’s go ahead and do that then.

Open the Views\home.blade.php and look for the line where it says You are logged in!.

We will place our component below this. In order to do that, type the following:

@livewire('search-drop-down')

The Livewire Component

Much like the Controller, all the logic of a Livewire component goes inside the component file. In our case, that would be the \app\Http\Livewire\SearchDropDown.php file.

<?php

namespace App\Http\Livewire;

use App\Models\User;
use Livewire\Component;

class SearchDropDown extends Component
{
    public $term;
    public $users;

    public function updatedTerm(){
        $this->users = User::where('name', 'like', '%' . $this->term . '%')
            ->get()
            ->toArray();
    }
    public function render()
    {
        return view('livewire.search-drop-down');
    }
}

Save the page and refresh and navigate to http://127.0.0.1:8000/demo.

You should see something like this now.

The Livewire Search Form

The code is very simple and self-explanatory. All the real-time magic is handled by Livewire.

That’s it! It’s that simple.

Feel free to download a slightly updated version of this project from GitHub, if you want to.

Share This Post

Subscribe To my Future Posts

Get notified whenever I post something new

More To Explore