Via Composer:
$ composer require nepada/autocomplete-input
extensions:
- Nepada\Bridges\AutocompleteInputDI\AutocompleteInputExtension
It will register extension method addAutocomplete($name, $label, callable $dataSource): AutocompleteInput
to Nette\Forms\Container
.
You can also use AutocompleteInputMixin
trait in your base form/container class to add method addAutocomplete($name, $label, callable $dataSource): AutocompleteInput
.
Example:
trait FormControls
{
use Nepada\Bridges\AutocompleteInputForms\AutocompleteInputMixin;
public function addContainer($name)
{
$control = new Container;
$control->setCurrentGroup($this->getCurrentGroup());
if ($this->currentGroup !== null) {
$this->currentGroup->add($control);
}
return $this[$name] = $control;
}
}
class Container extends Nette\Forms\Container
{
use FormControls;
}
class Form extends Nette\Forms\Form
{
use FormControls;
}
AutocompleteInput
is a standard text input from Nette enhanced with the autocomplete feature. The input exposes URL to retrieve the entries matching a specified query - you need to pass data source callback when creating the input:
$autocompleteInput = $form->addAutocomplete('foo', 'Foo', function (string $query) {
// return entries matching the query
});
$autocompleteInput->setAutocompleteMinLength(3); // set minimum input length to trigger autocomplete
The backend form control is not tightly coupled to any specific client side implementation. The rendered input contains data attributes with all the necessary settings:
<input type="text" name="foo"
data-autocomplete-query-placeholder="__QUERY_PLACEHOLDER__"
data-autocomplete-url="/some-url/?do=form-foo-autocomplete&form-foo-query=__QUERY_PLACEHOLDER__"
data-autocomplete-min-length="3"
>
<!--
data-autocomplete-min-length is optional
-->
If you do not want to roll out your own client side solution, try @nepada/autocomplete-input npm package.