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:

Recommended Post
Featured Post
How To Open Datepicker Popup In Angular 15 Material
How To Open Datepicker Popup I...

In this tutorial, I will guide you through the process of opening the datepicker popup in the Angular 15 Material framew...

Read More

Jul-10-2023

How To Check Array Is Empty Or Null In Javascript
How To Check Array Is Empty Or...

In this example, I will show you how to check if an array is empty or null in javascript or jquery. When we are wor...

Read More

Aug-18-2020

Change Text Color Based On Background Color Using Javascript
Change Text Color Based On Bac...

In this article, we will see a change text color based on background color using javascript. Sometimes we have requ...

Read More

Dec-25-2020

What Is New In Laravel 9 - Features Of Laravel 9
What Is New In Laravel 9 - Fea...

In this article, we will see what is new in laravel 9 and the features of laravel 9. Laravel 9 is recently released...

Read More

Feb-13-2022