Live Search in Laravel Using Livewire

Implementing a live search feature in your Laravel application can significantly enhance the user experience by providing instant search results without requiring page reloads. Livewire, a powerful Laravel framework, simplifies this process by enabling dynamic user interfaces directly within PHP. In this article, we’ll walk through the process of creating a live search feature using Livewire in Laravel.

Prerequisites

Before starting, ensure you have the following:

A Laravel application set up locally.
Livewire installed in your Laravel project.
A database with a sample table to search data from (e.g., a products table).

If you haven’t installed Livewire yet, you can do so by running:

composer require livewire/livewire

After installation, include the Livewire scripts in your application’s layout file:

<!-- In resources/views/layouts/app.blade.php -->
<head>
    @livewireStyles
</head>
<body>
    @livewireScripts
</body>

Step 1: Create a Livewire Component

Start by generating a new Livewire component for the live search feature:

php artisan make:livewire LiveSearch

This command creates two files:

app/Http/Livewire/LiveSearch.php (the component logic)
resources/views/livewire/live-search.blade.php (the component view)

Step 2: Define the Component Logic

Open the LiveSearch.php file and update the logic to handle search queries:

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Product;

class LiveSearch extends Component
{
    public $search = '';
    public $results = [];

    public function updatedSearch()
    {
        $this->results = Product::where('name', 'like', '%' . $this->search . '%')->get();
    }

    public function render()
    {
        return view('livewire.live-search');
    }
}

Here’s what’s happening:

$search: A public property bound to the input field in the view.
$results: Holds the search results.
updatedSearch(): A method that updates the $results whenever $search is modified.

Step 3: Create the Component View

Edit the live-search.blade.php file to create the search input and display results dynamically:

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

    @if(!empty($results))
        <ul class="list-group mt-2">
            @foreach($results as $result)
                <li class="list-group-item">{{ $result->name }}</li>
            @endforeach
        </ul>
    @else
        <p class="mt-2">No results found.</p>
    @endif
</div>

Explanation:

The wire:model="search" directive binds the input field to the $search property.
When $search updates, the updatedSearch() method runs automatically, refreshing the $results.
The results are displayed in a list format.

Step 4: Add the Component to a Page

You can now include the live-search component in any Blade view:

<!-- In resources/views/home.blade.php -->
@extends('layouts.app')

@section('content')
    <div class="container">
        <h1>Live Search</h1>
        @livewire('live-search')
    </div>
@endsection

Visit the corresponding route to see your live search in action.

Step 5: Customize and Optimize

Adding Throttling

To improve performance and avoid excessive database queries, you can throttle the search input:

use Livewire\WithPagination;

class LiveSearch extends Component
{
    use WithPagination;

    public $search = '';

    public function updatedSearch()
    {
        $this->resetPage();
    }

    public function getResultsProperty()
    {
        return Product::where('name', 'like', '%' . $this->search . '%')
                      ->paginate(10);
    }

    public function render()
    {
        return view('livewire.live-search', [
            'results' => $this->results
        ]);
    }
}

Enhancing the UI

You can style the search bar and results with a CSS framework like Bootstrap or Tailwind CSS to make it visually appealing.

Conclusion

Using Livewire to build a live search feature in Laravel is a straightforward and efficient way to enhance user interactivity. You can create seamless and dynamic search experiences without writing JavaScript by leveraging Livewire's real-time capabilities. Try extending this example to include advanced features like filtering or sorting results, and watch your application become more user-friendly!