FilamentPHP TextInput Field with Autocomplete feature

This package replaces the native <datalist> functionality with a custom, non-native autocomplete for the TextInput component in FilamentPHP 3, offering enhanced flexibility and customization options.

Installation

You can install the package via composer:

composer require borjajimnz/text-input-autocomplete

Usage

By default, we will use a non-native datalist. If you want to use the native one, simply add ->datalistNative().

Use the Tab key to navigate through the available options in the datalist, or move around using the Up and Down arrow keys.

use Borjajimnz\TextInputAutocomplete\Forms\Components\AutoComplete;

AutoComplete::make('favorite')
    ->datalist(function () {
        return ['php','laravel', 'livewire','filamentphp', 'tailwindcss'];
    });

These are all the options available to configure your field, if needed.

use Borjajimnz\TextInputAutocomplete\Forms\Components\AutoComplete;

AutoComplete::make('favorite')
    ->datalistNative(false)
    ->datalistMinCharsToSearch(0)
    ->datalistMaxItems(false)
    ->datalistDisableScroll(false)
    ->datalistOpenOnClick(true)
    ->datalist(function () {
        return ['php','laravel', 'livewire','filamentphp', 'tailwindcss'];
    });

Or if you want to use the native datalist with a custom ID.

use Borjajimnz\TextInputAutocomplete\Forms\Components\AutoComplete;

AutoComplete::make('favorite')
    ->datalistNativeId('customized.id')
    ->datalist(function () {
        return ['php','laravel', 'livewire','filamentphp', 'tailwindcss'];
    });

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• FilamentPHP
• Livewire
• Laravel

License

The MIT License (MIT). Please see License File for more information.