Laravel 11 Livewire 3 Search: Build a Dynamic Search Feature

In this tutorial, I will show you how to create a real-time search feature in Laravel 11 using Livewire 3. Livewire makes it easy to build dynamic search functionality without writing complex JavaScript.

We will create a simple search bar that filters results as you type. This is useful for searching products, users, posts, or any data in your application.

Laravel 11 Livewire 3 Search: Step-by-Step Guide

First, install Livewire in your Laravel 11 project if you haven’t already:

composer require livewire/livewire

Then, publish the Livewire configuration:

php artisan livewire:publish

Run the following command to generate a Livewire component:

php artisan make:livewire search-users

This will create two files:

• app/Livewire/SearchUsers.php (Component logic)
• resources/views/livewire/search-users.blade.php (Component view)

Open app/Livewire/SearchUsers.php and update the code:

namespace App\Livewire;

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

class SearchUsers extends Component
{
    public $search = '';

    public function render()
    {
        $users = User::where('name', 'like', '%' . $this->search . '%')->get();

        return view('livewire.search-users', compact('users'));
    }
}

Here, we use the $search property to store the search query and dynamically fetch users from the database.

Open resources/views/livewire/search-users.blade.php and add the following code.

<div>
    <input type="text" wire:model="search" placeholder="Search users..." class="form-control">

    <ul>
        @foreach($users as $user)
            <li>{{ $user->name }}</li>
        @endforeach
    </ul>
</div>

The wire:model="search" binding ensures that as the user types, the search updates in real time

Now, add the component to any Blade view, such as resources/views/welcome.blade.php

@livewire('search-users')

Start your Laravel application:

php artisan serve

You might also like:

• Read Also: Laravel 11 Livewire 3 Pagination Example
• Read Also: Server Side Custom Search in Datatables
• Read Also: Autocomplete Search from Database in Laravel 11
• Read Also: How To Live Search In Laravel 9 Using Meilisearch