Getting Started

Minimal Setup

Installation

composer require defstudio/filament-searchable-input

Publish the config (if needed):

php artisan vendor:publish --provider="Defstudio\FilamentSearchableInput\FilamentSearchableInputServiceProvider" --tag="filament-searchable-input-config"

First Use Case Replace a standard Select or TextInput in a Filament form/resource with a searchable autocomplete:

use Defstudio\FilamentSearchableInput\Forms\Components\SearchableInput;

SearchableInput::make('user_id')
    ->label('User')
    ->searchableOptions(function () {
        return User::query()->limit(10)->get();
    })
    ->searchableOptionLabel('name')
    ->searchableOptionValue('id')
    ->required(),

Where to Look First
- Package Docs (if available)
- config/filament-searchable-input.php (for global defaults)
- vendor/defstudio/filament-searchable-input/src (for advanced customization)

Implementation Patterns

Core Workflows

Basic Searchable Input

SearchableInput::make('category_id')
    ->searchableOptions(Category::query()->where('active', true))
    ->searchableOptionLabel('name')
    ->searchableOptionValue('id')
    ->placeholder('Search categories...');

Dynamic Query Building Use closures for real-time filtering:

->searchableOptions(function (string $query) {
    return Product::query()
        ->where('name', 'like', "%{$query}%")
        ->orWhere('sku', 'like', "%{$query}%")
        ->limit(20)
        ->get();
})

Integration with Filament Forms/Resources Replace Select or TextInput in:

Form Builder:

$form->components([
    SearchableInput::make('related_post_id')
        ->relationship('posts', 'title')
        ->required(),
]);

Table Columns (for inline editing):

use Defstudio\FilamentSearchableInput\Tables\Columns\SearchableInputColumn;

SearchableInputColumn::make('author_id')
    ->label('Author')
    ->searchableOptions(User::query())
    ->searchableOptionLabel('name')
    ->searchableOptionValue('id');

Debouncing Search Requests Configure in config/filament-searchable-input.php:
```
'debounce' => 300, // ms
```
Customizing the UI Extend the default Blade view (resources/views/vendor/filament-searchable-input/input.blade.php) or override via:
```
->view('custom.path.to.view')
```

Advanced Patterns

Remote Data Fetching Fetch options from an API:

->searchableOptions(function (string $query) {
    return Http::get("https://api.example.com/search?q={$query}")->json()['data'];
})
->searchableOptionLabel('display_name')
->searchableOptionValue('id');

Caching Search Results Cache query results to reduce DB load:

->searchableOptions(function (string $query) {
    return Cache::remember("searchable_{$query}", now()->addMinutes(5), function () use ($query) {
        return Product::where('name', 'like', "%{$query}%")->limit(10)->get();
    });
})

Multi-Select Support Combine with Select for multi-value selection:

SearchableInput::make('tags')
    ->searchableOptions(Tag::query())
    ->searchableOptionLabel('name')
    ->searchableOptionValue('id')
    ->multiple()
    ->maxItems(5);

Integration with Filament Spatie Media Library Search media files:

->searchableOptions(function (string $query) {
    return Media::query()
        ->where('title', 'like', "%{$query}%")
        ->orWhere('description', 'like', "%{$query}%")
        ->limit(10)
        ->get();
})
->searchableOptionLabel('title')
->searchableOptionValue('id');

Gotchas and Tips

Common Pitfalls

Performance Issues

Problem: Slow queries with large datasets.

Fix: Add limit() and select() to queries:

->searchableOptions(function (string $query) {
    return User::query()
        ->where('name', 'like', "%{$query}%")
        ->select('id', 'name') // Only fetch needed columns
        ->limit(20)
        ->get();
})

Tip: Use database indexes on searchable columns.

Case Sensitivity
- Problem: Searches may be case-sensitive.
- Fix: Use ->whereRaw('LOWER(name) LIKE LOWER(?)', ["%{$query}%"]) or add a full-text index.
CORS Errors (API Endpoints)
- Problem: If fetching remote data, CORS may block requests.
- Fix: Ensure your API includes proper CORS headers or proxy requests via a Laravel route.
Stale Cache
- Problem: Cached search results become outdated.
- Fix: Invalidate cache when relevant data changes (e.g., Product::updated() event).

JavaScript Conflicts

Problem: Conflicts with other Filament plugins or custom JS.

Fix: Check browser console for errors. Override the default JS via:

->extraAttributes(['data-custom-attr' => 'value'])
->script('
    document.addEventListener("DOMContentLoaded", function() {
        console.log("Custom JS for searchable input");
    });
')

Debugging Tips

Log Queries Enable Laravel query logging in AppServiceProvider:
```
public function boot()
{
    if (app()->environment('local')) {
        DB::enableQueryLog();
    }
}
```
Then inspect logs after triggering the search.
Inspect Network Requests Use browser DevTools (Network tab) to verify:
- API endpoints are hit.
- Payloads match expectations.
- Responses are parsed correctly.
Disable Debounce Temporarily Override debounce in config for testing:
```
'debounce' => 0, // Immediate search
```

Extension Points

Custom Option Rendering Override how options are displayed in the dropdown:

->searchableOptionView('custom.view.path')
->searchableOptionViewData(function ($option) {
    return ['extra_data' => $option->extra_field];
})

Predefined Values Add static options alongside dynamic ones:

->options([
    'all' => 'All Categories',
    'featured' => 'Featured',
])
->searchableOptions(Category::query())

Custom Styling Use Filament’s CSS variables or add custom classes:
```
->extraAttributes(['class' => 'custom-searchable-input'])
```
Event Listeners Listen to search events (e.g., searchable-input:searching):
```
event(new SearchableInputSearching($query, $component));
```
Register listeners in EventServiceProvider.

Localization Override labels/placeholders:

->placeholder(__('filament-searchable-input::search.placeholder'))
->label(__('filament-searchable-input::search.label'))

Filament Searchable Input Laravel Package