How to Customize Global Search in Laravel Filament 4

6 mins0
How to Customize Global Search in Laravel Filament 4

Filament provides powerful global search feature for Laravel apps. Making it fast and easy to locate records across multiple resources. Most of of the time we use it as it is yet sometimes we require to customize of change few setting of it.

In this post, we will walk through all major customization options for Filament global search, blending practical explanations and example code snippets.

If you need help setting up your Filament project, check this guide: How to Install and Set Up Filament in Laravel.

What is Global Search in Filament

Global search in Filament lets users search across all resources from a single input box, boosting productivity and user experience. Developers can customize nearly every aspect like what fields show up, result formatting, shortcuts, and even underlying search logic.

Moving further, we will see few commonly required customization for global search in Filament Laravel.

Limiting Result Count

You can limit the number of results per resource. This helps maintain UI clarity and performance for large datasets.

protected static int $globalSearchResultsLimit = 15;

Add this property to your resource to return 15 results per resource, instead of the default limit. This limit can be customized with different values for each resources.

Customizing Result Description

Sometimes it requires to show additional information with search results like description of product or current stock into search result for product resource. It amplify the user experience by displaying more context for each result via getGlobalSearchResultDetails.

public static function getGlobalSearchResultDetails($model): array
{
    return [
        'Brand' => $model->brand->name,
        'Description' => $model->description,
        'Stock' => $model->stock,
    ];
}

This method allows you to display related data, such as brand information, for each search result.

Defining Searchable Attributes

For configuring, which fields or columns will be considered to global search. We can use getGloballySearchableAttributes.

This method also allows to search with relationship data with help of dot notation.

public static function getGloballySearchableAttributes(): array
{
    return ['name', 'sku', 'brand.name'];
}

Now global search will search the resource name, SKU, and the related brand’s name.

Custom Key Bindings

Improve accessibility by adding keyboard shortcuts for global search. It will help to improve user experience for search feature.

This configuration or customization will be applied into panel or panel provider.

use Filament\Panel;

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

With this config, pressing Ctrl+K or Cmd+K launches the search bar. However it can be customized to use any other keys too.

Debounce Timing

Global search feature implies query on large data set of many tables. So with large data set sometimes it takes time to process and display results. In this type of cases, it can hit server with multiple requests each time user ask for search unknowing while typing query. We can handle this type of problem with help of debounce.

Debounce with reduce repeat server request and provide better UX while production. Filament provides very easy way to configure debounce time like below example: 

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        ->globalSearchDebounce('750ms');
}

Same as key binding, It will applies on panel.

Disabling Global Search

Opt out resources from global search for security or relevance reasons.

protected static bool $disableGlobalSearch = true;

Alternatively, disable globally in your panel setup:

return $panel->globalSearch(false);

Custom Search Actions & URLs

Filament also provide way to customize what happens when a user selects a result. For display view or detail page on click of search result item instead of edit page.

public static function getGlobalSearchResultUrl(Model $record): string
{
    return self::getUrl('view', ['record' => $record]);
}

Conclusion

Filament’s global search is robust by default, but truly shines with customization. By configuring result counts, details, fields, shortcuts, and relationships, developers can craft a user experience tailored to their unique application needs.

Related Articles