How to Add and Customize Global Search in Filament

6 mins0
How to Implement Global Search in Filament

One of core requirements of every web application is search functionality same goes for admin panels. While resource wise search can be easily implemented but implementing global search functionality is quiet stressful. 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. If Filament is not installed yet, follow our step-by-step Filament installation and setup guide to get started.

Enable Global Search in a Filament Resource

Global search works by specifying the attribute that Filament will use to identify each resource record. This is set using 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. When someone try to search it will show records from both resources as per search query and this title attribute will be used to show label for that record.

Customizing Search Results

There are some methods which can be used to customize search result like setting up custom title with mixing custom text or multiple fields from 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),
        ];
    }
}

Here, Order resource is customized for global search results. 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 specifies which column will be used to search user’s query. It can be used with 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.

Related Articles