Apps Artificial Intelligence CSS DevOps Go JavaScript Laravel Linux MongoDB MySQL PHP Python Rust Svelte Vue

Building a Live Search Page in Filament PHP

1 min read .
Updated on
Building a Live Search Page in Filament PHP

Real-time search can make an admin dashboard much easier to use. Filament is built on Livewire, so a custom resource page can react to search input without writing a separate frontend application.

This example adds a live-search page to a PostResource.

1. Generate a Custom Page

Generate a custom page inside the resource:

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

The exact generated path can vary by Filament version and panel structure, so check the files created by the command.

2. Register the Page

In app/Filament/Resources/PostResource.php, add the page to getPages() alongside the resource’s existing routes:

class PostResource extends Resource
{
    public static function getPages(): array
    {
        return [
            // Keep the resource's existing index/create/edit pages here.
            'search' => Pages\SearchPost::route('/search'),
        ];
    }
}

The custom page then becomes part of the resource’s route group.

3. Implement Live Search Logic

In the generated SearchPost page class:

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

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 function getPostsProperty()
    {
        $query = trim($this->query);

        if ($query === '') {
            return collect();
        }

        return Post::query()
            ->where('title', 'like', '%' . $query . '%')
            ->limit(20)
            ->get();
    }
}

Using a computed Livewire property avoids copying model data into a public array every time the input changes. Returning no results for an empty query also prevents loading the entire table accidentally.

For large datasets, add an appropriate database index and consider full-text search or a dedicated search engine rather than relying on a leading-wildcard LIKE query.

4. Build the Blade View

Create or update the generated Blade view:

<x-filament-panels::page>
    <x-filament::input.wrapper>
        <x-filament::input
            type="search"
            wire:model.live.debounce.300ms="query"
            placeholder="Search post titles..."
        />
    </x-filament::input.wrapper>

    <div class="mt-6 space-y-4">
        @forelse ($this->posts as $post)
            <div class="rounded-lg border p-4">
                <h3 class="text-lg font-semibold">{{ $post->title }}</h3>
                @if ($post->description)
                    <p class="text-sm text-gray-600">{{ $post->description }}</p>
                @endif
            </div>
        @empty
            @if (trim($query) !== '')
                <p>No matching posts found.</p>
            @endif
        @endforelse
    </div>
</x-filament-panels::page>

wire:model.live.debounce.300ms updates the server-side property after a short pause in typing, reducing unnecessary requests while still feeling responsive.

Conclusion

A Filament custom page plus Livewire is enough to build a responsive live-search experience inside an admin panel. Start with a small debounced query, limit the result set, and upgrade the search strategy as the data volume and matching requirements grow.

Laravel Filament

Related Posts

Building a Nested Category API in Laravel 11: A Practical Guide
Updated on
Building a Nested Category API in Laravel 11: A Practical Guide
Nested categories are common in e-commerce platforms, CMS applications, documentation systems, and other products that need hierarchical navigation. In Laravel, a self-referencing Eloquent relationship can model a category that belongs to a parent and has any number of children. This Laravel 11 example builds a small API for creating and reading category trees. 1. Create the Laravel Project Copy composer create-project --prefer-dist laravel/laravel laravel-nested-categories cd laravel-nested-categories php artisan serve 2. Create the Category Model and Migration Copy php artisan make:model Category -m Define the table in the generated migration:
Laravel
Building a Simple CRUD Application in Laravel: A Practical Guide
Updated on
Building a Simple CRUD Application in Laravel: A Practical Guide
Building a CRUD application is one of the best ways to learn the core pieces of Laravel. In this guide, we will create a simple Post resource that supports Create, Read, Update, and Delete operations using Eloquent, resource routes, validation, and Blade views. 1. Create the Laravel Project Make sure Composer and a supported PHP version are installed, then run: Copy composer create-project --prefer-dist laravel/laravel laravel-crud cd laravel-crud php artisan serve The development server is normally available at http://localhost:8000.
Laravel CRUD
Data Validation in Laravel: A Complete Developer Guide
Updated on
Data Validation in Laravel: A Complete Developer Guide
Validation is an important boundary in web applications. It ensures incoming data has the shape and constraints your application expects before that data reaches business logic or persistence. Laravel provides several validation APIs, from quick controller validation to reusable Form Request classes and custom rules. 1. Basic Validation For small request handlers, call validate() on the request: Copy use Illuminate\Http\Request; public function store(Request $request) { $validatedData = $request->validate([ 'name' => ['required', 'string', 'max:255'], 'email' => ['required', 'email', 'unique:users,email'], 'password' => ['required', 'string', 'min:8', 'confirmed'], ]); // Use $validatedData rather than the entire request payload. } For a normal browser request, Laravel redirects back with validation errors in the session. For requests expecting JSON, Laravel returns a validation error response, normally with HTTP status 422.
Laravel Validation
Understanding HTTP Status Codes in Laravel: A Developer's Guide
Updated on
Understanding HTTP Status Codes in Laravel: A Developer's Guide
HTTP status codes tell clients whether a request succeeded, failed, requires authentication, or encountered another condition. Choosing the right status code makes Laravel APIs easier to consume and helps clients implement predictable error handling. 200: OK Use 200 OK when a request succeeds and the response includes a representation or other useful content. Common cases: A successful GET request that returns data. A successful update that returns the updated resource. A successful action endpoint that returns a result. 201: Created Use 201 Created after successfully creating a new resource, usually from a POST request.
Laravel
Managing Image Uploads and Resizing with Laravel and Intervention Image
Updated on
Managing Image Uploads and Resizing with Laravel and Intervention Image
Image handling is a common requirement in web applications. Uploading original files, creating thumbnails, converting formats, and cleaning up old files all need to be handled consistently. Laravel’s filesystem abstraction works well with image-processing libraries such as Intervention Image. The code in this article uses the classic Intervention Image v2-style API (Image::make, fit, and encode). Intervention Image v3 uses a different API, so check the package version installed in your project before copying the example directly.
Laravel
chevron-up