How to Search Records using Laravel 10 Livewire

Websolutionstuff | Dec-27-2023 | Categories : Laravel

Hey developers! Today, I'm excited to walk you through an incredibly powerful feature in Laravel 10: searching records using Livewire. If you've ever wanted to build a lightning-fast, interactive search functionality without page reloads, you're in for a treat.

Livewire, a Laravel library for building dynamic interfaces, makes it a breeze to implement real-time search features seamlessly integrated into your application.

In this article, we'll see how to search records using laravel 10 Livewire. Also, you can use the livewire search filter in laravel 8, laravel 9, and laravel 10.

Step-by-Step Guide: Searching Records with Laravel 10 Livewire

Step 1: Set Up Your Laravel 10 Project

Make sure you have a Laravel 10 project ready to go. If not, create one using the Laravel installer:

composer create-project laravel/laravel your-project-name
cd your-project-name

Step 2: Install Livewire

Next, install Livewire using Composer:

composer require livewire/livewire

Step 3: Create Livewire Component

Generate a Livewire component for your search functionality:

php artisan livewire:make Search

This command creates a Search component in the app/Http/Livewire directory.

Step 4: Set Up Livewire Blade File

In the resources/views/livewire/search.blade.php file, add the Livewire component markup. This file will handle the display and interaction of your search component.

<div>
    <input wire:model="search" type="text" placeholder="Search...">
    
    <ul>
        @foreach($results as $result)
            <li>{{ $result }}</li>
        @endforeach
    </ul>
</div>

Step 5: Define Properties and Methods in Livewire Component

In the app/Http/Livewire/Search.php file, define the properties and methods for your Livewire component:

<?php

namespace App\Http\Livewire;

use App\User;
use Livewire\Component;
use Livewire\WithPagination;

class Search extends Component
{
    use WithPagination;
    public $search = '';        

    public function render()
    {
        $search = '%'.$this->search.'%';
        return view('livewire.search',[
            'users' => User::where('name','like', $search)->paginate(10)
        ]);
    }
}

Step 6: Include Livewire Component in Your Blade File

In the blade file where you want to include the search component, add the Livewire directive:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            
            <input type="text"  class="form-control" placeholder="Search" wire:model="search" />

            <table class="table table-bordered" style="margin: 10px 0 10px 0;">
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
                @foreach($users as $user)
                <tr>
                    <td>
                        {{ $user->name }}
                    </td>
                    <td>
                        {{ $user->email }}
                    </td>
                </tr>
                @endforeach
            </table>
            {{ $users->links() }}
        </div>
    </div>
</div>

Step 7: Define Route

In the web.php file define the search route.

routes/web.php

Route::get('/search', function () {
    return view('search');
});

Step 8: Create View File

create a blade file for a call from the route. in this file we will use @livewireStyles, @livewireScripts and @livewire('file-form').

resources/views/search.blade.php

<!DOCTYPE html>
<html>
<head>
    <title></title>
    @livewireStyles
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<div class="container mt-4">
    <div class="row">
      <div class="col-md-8 offset-2">
        <div class="card">
          <div class="card-header bg-success text-white ">
            <strong>Searching Records with Laravel 10 Livewire - Websolutionstuff</strong>
          </div>
          <div class="card-body">
            @livewire('search')
          </div>
        </div>
      </div>
    </div>
</div>
</body>
<script src="{{ asset('js/app.js') }}"></script>
@livewireScripts
</html>

Step 9: Run Your Laravel Application

Start your Laravel development server:

php artisan serve

Conclusion:

Congratulations! You've successfully implemented real-time record searching using Laravel 10 and Livewire. This dynamic approach to searching enhances user experience by providing instant results without reloading the page.

Happy coding!

You might also like: