Hello, developers! In this article, we'll see how to search records using laravel 10 Livewire. Here, in laravel, we'll create a search functionality without a page refresh. Also, we'll create a Search component and search records from the MySQL database.
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 laravel 10 livewire search records. Also, you can use the livewire search filter in laravel 8, laravel 9, and laravel 10.
In this step, we'll install the laravel 10 application using the following command.
composer create-project laravel/laravel your-project-name
cd your-project-name
Next, install Livewire using Composer:
composer require livewire/livewire
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.
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>
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)
]);
}
}
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>
In the web.php file define the search route.
routes/web.php
Route::get('/search', function () {
return view('search');
});
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>Laravel 10 Livewire Search Records Example - Vidvatek</strong>
</div>
<div class="card-body">
@livewire('search')
</div>
</div>
</div>
</div>
</div>
</body>
<script src="{{ asset('js/app.js') }}"></script>
@livewireScripts
</html>
Now, run the laravel 10 application using the following command.
php artisan serve
You might also like:
- Read Also: How to Integrate Elasticsearch with Laravel 10
- Read Also: How to Create Modal in Laravel 10 Livewire
- Read Also: How To Create CRUD Operation In Laravel 10 Livewire
- Read Also: How to Create Livewire Multi Step Form Wizard in Laravel 10