Basic Search using Laravel Livewire 3 | EP 8

In this post, I will show you how to add basic search functionality with laravel livewire 3.

In this example, we will create a Users Livewire component. I will display users in a table with pagination. then i will add search input on top, user can input add search users from list. So, let's get started with a step-by-step example.

Step 1: Create Users Component

Now here we will create a Livewire component using their command. So run the following command to create an add more component.

php artisan make:livewire Users

Now they created files on both paths:

app/Livewire/Users.php
   
resources/views/livewire/users.blade.php

Now, both files we will update as below for our contact us form.

app/Livewire/Users.php

<?php

namespace App\Livewire;

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

class PhotoUpload extends Component
{
    use WithPagination;

    public $search;

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

resources/views/livewire/users.blade.php

<div>

    <div class="mt-3">
        <input type="text" name="search" wire:model.live="search" class="form-control" placeholder="Search">
    </div>

    <table class="table table-striped table-bordered mt-3">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            @foreach($users as $user)
                <tr>
                    <td>{{ $user->id }}</td>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->email }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>

    {{ $users->links() }}
 
</div>

Step 2: Use Livewire Component

now, we will user counter component in home page. so you need to update home.blade.php file as the following way:

resources/views/home.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Counter') }}</div>

                <div class="card-body">
                    <livewire:users />
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Run Laravel:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/

Now, you need to register user and go to dashboard:

I hope it can help you...