How to Add and Customize Global Search in Filament

Search functionality forms one of the core requirements of every web application, including admin panels. Developers can implement resource-wise search easily, but building a global search feature often creates stress. But with help of Filament we can easily implement global search in Laravel application.

Instead of browsing through each resource separately, you can quickly find the record you’re looking for whether it’s a user, product, or order.

Here, we’ll walk through how to effectively implement and customize Global Search in Filament with practical examples using multiple resources.

Before moving forward, make sure you have the Filament application up and running with the admin panel created. Setup Filament by following our step-by-step Filament installation and setup guide to get started if Filament is not installed.

Enable Global Search in a Filament Resource

Global search identifies each resource record through a specified attribute. You set the title attribute by defining the $recordTitleAttribute property.

Product Resource

// app/Filament/Resources/ProductResource.php

class ProductResource extends Resource
{
    protected static ?string $recordTitleAttribute = 'name';
}

This makes products globally searchable by their name field. It will show search input into navbar automatically once added this code

Category Resource

// app/Filament/Resources/CategoryResource.php

class CategoryResource extends Resource
{
    protected static ?string $recordTitleAttribute = 'title';
}

Above will enable global search for category resource. Enabling this option adds global search to the category resource. When users search, the system displays matching records from both resources, and the title attribute defines the label for each record.

Customizing Search Results

You can customize search results using several methods, such as setting a custom title by combining text or multiple fields from the records.

Let’s understand it with examples:

<?php

namespace App\Filament\Resources;

use App\Models\Order;
use Filament\Resources\Resource;

class OrderResource extends Resource
{
    protected static string $model = Order::class;

    public static function getGloballySearchableAttributes(): array
    {
        return ['order_number'];
    }

    public static function getGlobalSearchResultTitle($record): string
    {
        return 'Order #' . $record->order_number;
    }

    public static function getGlobalSearchResultDetails($record): array
    {
        return [
            'Customer' => $record->user->name,
            'Total' => '$' . number_format($record->total, 2),
        ];
    }
}

In this example, we customize the Order resource to display results in global search. Like it shows Order # as prefix with order number.

For details, it’s showing customer name and total amounts using getGlobalSearchResultDetails method.

The global searchable attributes define which columns the system will use to match the user’s query. You can apply this to multiple columns. For example, If you want to search user with it’s first name and last name then you have to specify both columns into this array.

Limiting the number of global search results

Setting up limit resource wise is sometimes required. Filament shows 50 records as per resource by default. How ever it can be customized with $globalSearchResultsLimit attribute like showing into below example:

protected static int $globalSearchResultsLimit = 20;

It will limit results for particular resource to 20 records.

Setting Global Search Shortcut Key

The Filament allows user to define it’s own shortcut key for global search field To configure these, pass the globalSearchKeyBindings() method to the configuration:

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->globalSearchKeyBindings(['command+k', 'ctrl+k']);
}

For this configuration, we have to modify panel or panel service provide and set shortcut keys.

Conclusion

Implementing global search in Laravel Filament is fast like adding few lines of code. By configuring resources with the right attributes and providing additional context, you can create an admin panel where users find exactly what they need.

Codewolfy