PHPackages giacomomasseron/filament-textinput-autocomplete - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. giacomomasseron/filament-textinput-autocomplete ActiveLibrary[Utility & Helpers](/categories/utility) giacomomasseron/filament-textinput-autocomplete =============================================== A Filament v5 TextInput field with autocomplete (static + server search). v1.0(today)10MITPHPPHP ^8.2 Since Jun 13Pushed todayCompare [ Source](https://github.com/giacomomasseron/filament-textinput-autocomplete)[ Packagist](https://packagist.org/packages/giacomomasseron/filament-textinput-autocomplete)[ RSS](/packages/giacomomasseron-filament-textinput-autocomplete/feed)WikiDiscussions main Synced today READMEChangelog (1)Dependencies (5)Versions (2)Used By (0) Filament TextInput Autocomplete =============================== [](#filament-textinput-autocomplete) [![Latest Version on Packagist](https://camo.githubusercontent.com/76b602dbad77b2be7281f584108743c1a62598b6e341162c26087fb658114bfa/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f676961636f6d6f6d61737365726f6e2f66696c616d656e742d74657874696e7075742d6175746f636f6d706c6574652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/giacomomasseron/filament-textinput-autocomplete)[![GitHub Tests Action Status](https://camo.githubusercontent.com/0a0f1ca57e122f815b90cb819bdd5f5e9d3b4e971d6f6e45f13bf41f750d2fab/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f676961636f6d6f6d61737365726f6e2f66696c616d656e742d74657874696e7075742d6175746f636f6d706c6574652f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/giacomomasseron/filament-textinput-autocomplete/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/2ef216a8a88959204a582f9140f29b61023394555bb3b4ec83a77ea14c369ff9/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f676961636f6d6f6d61737365726f6e2f66696c616d656e742d74657874696e7075742d6175746f636f6d706c6574652f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/giacomomasseron/filament-textinput-autocomplete/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/e228ee13725209531deb1bdc7c75fd4dd76ad759e5961d9ef6c35143f40fb25d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f676961636f6d6f6d61737365726f6e2f66696c616d656e742d74657874696e7075742d6175746f636f6d706c6574652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/giacomomasseron/filament-textinput-autocomplete) A Filament v5 form field: a free-text input with an autocomplete dropdown. Suggestions can be static (filtered in the browser) or fetched from the server through Livewire. Each suggestion's markup is rendered by PHP via a single `itemView()` setter. Screenshots ----------- [](#screenshots) Static options (filtered client-side): [![Static autocomplete](screenshots/screen_static.png)](screenshots/screen_static.png) Server search (via Livewire, optionally calling an external API): [![Server-search autocomplete](screenshots/screen_apis.png)](screenshots/screen_apis.png) Requirements ------------ [](#requirements) - PHP 8.2+ - Filament v5 Installation ------------ [](#installation) ``` composer require giacomomasseron/filament-textinput-autocomplete ``` The compiled Alpine component and CSS ship in `dist/` and are registered with Filament automatically — no npm step is required to use the package. As with any Filament plugin that registers assets, publish them once (and on each deploy) so the stylesheet is served: ``` php artisan filament:assets ``` Usage ----- [](#usage) ### Static options (filtered client-side) [](#static-options-filtered-client-side) ``` use GiacomoMasseroni\TextInputAutocomplete\Forms\Components\AutocompleteInput; AutocompleteInput::make('country') ->options([ ['value' => 'es', 'label' => 'Spain', 'description' => 'Country'], ['value' => 'fr', 'label' => 'France', 'description' => 'Country'], ]) ->searchKeys(['label', 'description']) ->itemView(fn (array $item) => "{$item['label']} — {$item['description']}"); ``` ### Server search (via Livewire; may call an external API) [](#server-search-via-livewire-may-call-an-external-api) ``` use GiacomoMasseroni\TextInputAutocomplete\Forms\Components\AutocompleteInput; use Illuminate\Support\Facades\Http; AutocompleteInput::make('repo') ->getSearchResultsUsing(function (string $search) { $items = Http::get('https://api.github.com/search/repositories', [ 'q' => $search, ])->json('items', []); return collect($items) ->map(fn (array $repo) => [ 'value' => $repo['id'], 'label' => $repo['full_name'], ]) ->all(); }) ->itemView('filament.autocomplete.repo') // a Blade view that receives $item ->minChars(2) ->searchDebounce(300); ``` ### Item rendering [](#item-rendering) `itemView()` accepts three forms, resolved by type: - **Closure** — `fn (array $item) => ''`. Returned string is rendered as raw HTML (you are responsible for escaping). - **Blade view name** — e.g. `'filament.autocomplete.repo'`. The view receives the item as `$item`. - **Template string** — e.g. `'{label} — {description}'`. `{key}` tokens are replaced with the matching item values, HTML-escaped. If `itemView()` is not set, the item's `optionLabel` value is shown as escaped text. Configuration reference ----------------------- [](#configuration-reference) MethodDefaultPurpose`options(array|Closure)`—Static client-side source`searchKeys(array)``['label']`Item keys matched in static mode`getSearchResultsUsing(Closure)`—Server source; receives `string $search``itemView(string|Closure)`label (escaped)View name, raw-HTML closure, or `{key}` template`optionLabel(string)``'label'`Item key shown in the input on select`optionValue(string)``'value'`Item key stored as form state`minChars(int)``1`Minimum characters before searching`searchDebounce(int)``300`Debounce (ms) for server search`maxResults(int)``10`Max suggestions returned`placeholder(string|Closure)`—Input placeholder`noResultsMessage(string)``'No results found'`Empty-state text`loadingMessage(string)``'Loading...'`Loading-state text`options()` and `getSearchResultsUsing()` are mutually exclusive — setting both throws an `InvalidArgumentException`. `maxResults` must be at least 1. Styling ------- [](#styling) The field ships with a self-contained default style (a light input with a `#667eea` focus accent and a shadowed dropdown) so it looks consistent out of the box without depending on your panel's theme. It is served as a registered Filament CSS asset (`dist/autocomplete.css`, published via `php artisan filament:assets`). The styles are scoped to these classes: ClassElement`.fi-ac-wrapper`The relative-positioned container`.fi-ac-input`The text input`.fi-ac-dropdown`The suggestions dropdown`.fi-ac-item`A single suggestion (active row: `.fi-ac-item--active`)`.fi-ac-empty`Loading / no-results text (error row: `.fi-ac-empty--error`)To restyle, override any of these classes in your own stylesheet. Markup inside each suggestion is whatever your `itemView()` returns, so you control that completely. Development ----------- [](#development) ``` composer install npm install npm run build # rebuild dist/ assets after editing resources/js or resources/css vendor/bin/pest # run the test suite ``` License ------- [](#license) MIT ### Health Score 39 — LowBetter than 85% of packages Maintenance100 Actively maintained with recent releases Popularity2 Limited adoption so far Community2 Small or concentrated contributor base Maturity45 Maturing project, gaining track record How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 0d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/504902576948b6d89fe41cd186b483afa89cc9de1b238005a5b7dcc51d33997e?d=identicon)[giacomomasseron](/maintainers/giacomomasseron) ### Code Quality TestsPest ### Embed Badge ![Health badge](/badges/giacomomasseron-filament-textinput-autocomplete/health.svg) ``` [![Health](https://phpackages.com/badges/giacomomasseron-filament-textinput-autocomplete/health.svg)](https://phpackages.com/packages/giacomomasseron-filament-textinput-autocomplete) ``` ### Alternatives [stephenjude/filament-feature-flags Filament implementation of feature flags and segmentation with Laravel Pennant. 122157.7k1](/packages/stephenjude-filament-feature-flags)[rawilk/profile-filament-plugin Profile & MFA starter kit for filament. 3913.7k](/packages/rawilk-profile-filament-plugin)[datlechin/filament-menu-builder Create and manage menus and menu items 14356.9k2](/packages/datlechin-filament-menu-builder)[marcelweidum/filament-expiration-notice Customize the livewire expiration notice 94113.9k5](/packages/marcelweidum-filament-expiration-notice)[stephenjude/filament-blog Filament Blog Builder 20518.8k](/packages/stephenjude-filament-blog)[hydrat/filament-table-layout-toggle Filament plugin adding a toggle button to tables, allowing user to switch between Grid and Table layouts. 63105.4k2](/packages/hydrat-filament-table-layout-toggle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)