Membangun Halaman Live Search di Filament PHP

1 min read .

Updated on 02 Sep 2025

Di dashboard admin modern, punya fitur pencarian real-time itu bikin pengalaman pengguna jauh lebih nyaman. Dengan Filament, paket admin Laravel yang lagi populer, bikin halaman live search jadi gampang dan bersih. Di sini, kita bakal bikin halaman live search untuk postingan menggunakan kemampuan custom page di Filament.

1. Generate Halaman Custom

Mulai dengan generate halaman custom di dalam PostResource:

php artisan make:filament-page SearchPost --resource=PostResource --type=custom

Ini bakal bikin halaman SearchPost baru di bawah PostResource.

2. Daftarkan Halaman Custom

Buka app/Filament/Resources/PostResource.php dan tambahkan halaman baru di getPages():

class PostResource extends Resource
{
    public static function getPages(): array
    {
        return [
            'search' => Pages\SearchPost::route('/search'),
        ];
    }
}

Sekarang halaman live search bisa diakses via /search di PostResource.

3. Implementasikan Logika Live Search

Di app/Filament/Resources/PostResource/Pages/SearchPost.php:

use App\Filament\Resources\PostResource;
use Filament\Resources\Pages\Page;
use App\Models\Post;

class SearchPost extends Page
{
    protected static string $resource = PostResource::class;
    protected static string $view = 'filament.resources.post-resource.pages.search-post';

    public ?string $query = '';
    public array $posts = [];

    public function updatedQuery(): void
    {
        $this->posts = Post::query()
            ->where('title', 'like', '%' . $this->query . '%')
            ->get()
            ->toArray();
    }
}

Gini deh:

Properti $query otomatis terikat ke input field.
Metode updatedQuery() bakal jalan setiap kali input berubah, mengambil postingan yang judulnya sesuai query.

4. Buat Blade View untuk Live Search

Update resources/views/filament/resources/post-resource/pages/search-post.blade.php:

<x-filament-panels::page>
    <x-filament::input.wrapper>
        <x-filament::input
            type="text"
            wire:model.live="query"
            placeholder="Title"
        />
    </x-filament::input.wrapper>

    @if (!empty($posts))
        <div class="mt-6 space-y-4">
            @foreach ($posts as $post)
                <div class="p-4 border rounded-lg">
                    <h3 class="text-lg font-semibold">{{ $post['title'] }}</h3>
                    <p class="text-sm text-gray-600">{{ $post['description'] }}</p>
                </div>
            @endforeach
        </div>
    @endif
</x-filament-panels::page>

Blade ini bikin:

Input field responsif yang terikat ke $query.
List postingan yang update langsung saat ketik, berkat wire:model.live.

Kesimpulan

Pada akhirnya, cuma dengan beberapa langkah, kita bisa bikin halaman live search yang bersih dan responsif di Filament. Dengan Livewire, data update secara real-time, dan ini jadi dasar yang kuat kalau mau nambah filter atau pencarian yang lebih kompleks.