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 Auto Select Country Using IP Lookup In jQuery
How To Auto Select Country Usi...

In this article, we will see how to auto select a country using IP lookup in jquery. Here, we will learn about auto...

Read More

May-15-2023

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

How To Upload And Preview Image In React JS
How To Upload And Preview Imag...

In this article, we will see how to upload and preview images in react js. You can learn how to show an i...

Read More

Sep-06-2022

Carbon diffForHumans Laravel Example
Carbon diffForHumans Laravel E...

In this article, we will see carbon diffForHumans in laravel. Carbon diffForHumans function in carbon provides the...

Read More

Dec-14-2020