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.

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


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:


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('',[
            '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;">
                @foreach($users as $user)
                        {{ $user->name }}
                        {{ $user->email }}
            {{ $users->links() }}


Step 7: Define Route

In the web.php file define the search route.


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').


<!DOCTYPE html>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
<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 class="card-body">
<script src="{{ asset('js/app.js') }}"></script>


Step 9: Run Your Laravel Application

Start your Laravel development server:

php artisan serve



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


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


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


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