I'm using Livewire and encountering an issue with my live search. Every time I enter a name into the search bar, the live search doesn't work immediately; instead, I have to click the pagination button several times. Can you help me?
my code:
<?php
namespace App\Livewire;
use App\Models\mahasiswa;
use Livewire\Component;
use Livewire\WithPagination;
class Search extends Component
{
public $search = "";
use WithPagination;
protected $paginationTheme = 'bootstrap';
public function render()
{
$mahasiswa = mahasiswa::where('nama', 'like', '%' . $this->search . '%')->paginate(5);
return view('livewire.search', [
'mahasiswa' => $mahasiswa,
]);
}
public function updatingSearch()
{
$this->resetPage();
}
}
my views:
t
<div>
<div class="my-3 p-3 bg-body rounded shadow-sm">
<!-- FORM PENCARIAN -->
<div class="pb-3">
<input type="text" class="form-control me-2" name="search" wire:model.debounce.500ms="search" placeholder="Search" aria-label="Search" id="liveSearchInput">
</div>
<!-- TOMBOL TAMBAH DATA -->
<div class="pb-3">
<a href='{{url('mahasiswa/create')}}' class="btn btn-primary">+ Tambah Data</a>
</div>
<table class="table table-striped">
<thead>
<tr >
<th class="col-md-1">No</th>
<th class="col-md-3">NIM</th>
<th class="col-md-4">Nama</th>
<th class="col-md-2">Jurusan</th>
<th class="col-md-2">Aksi</th>
</tr>
</thead>
<tbody>
@foreach ($mahasiswa as $item)
<tr wire:key="item-{{ $item->id }}">
<td>{{$mahasiswa->firstItem() + $loop->index}}</td>
<td>{{$item->nim}}</td>
<td>{{$item->nama}}</td>
<td>{{$item->jurusan}}</td>
<td>
<a href='{{url('mahasiswa/'.$item->nim.'/edit')}}' class="btn btn-success btn-sm">Edit</a>
<form onsubmit="return confirm('Yakin menghapus data?')" class="d-inline" action="{{url('mahasiswa/'.$item->nim)}}" method="POST">
@csrf
@method('DELETE')
<button type="submit" name="submit" class="btn btn-danger btn-sm">Del</Del></button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
{{$mahasiswa->links()}}
</div>
</div>
I want the data to appear immediately without having to click the pagination button multiple times.
With Livewire 3 wire:model is always deferred, to get the desired result you need wire:model.live :
<input type="text" wire:model.live.debounce.500ms="search">
Here the documentation