Componette

Componette

nepada

nepada / autocomplete-input v1.3.1

Autocomplete text input for Nette forms.

download-cloud-line composer require nepada/autocomplete-input

Autocomplete text input

Build Status Coverage Status Downloads this Month Latest stable

Installation

Via Composer:

$ composer require nepada/autocomplete-input

Option A: install form container extension method via DI extension

extensions:
    - Nepada\Bridges\AutocompleteInputDI\AutocompleteInputExtension

It will register extension method addAutocomplete($name, $label, callable $dataSource): AutocompleteInput to Nette\Forms\Container.

Option B: use trait in your base form/container class

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;

}

Usage

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

Client side

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.

  • v1.3.1 1.3.1

    • Resolve nextras/secured-links incompatibility when generating autocomplete callback URL.
  • v1.3.0 1.3.0

    • Drop support for PHP <8.1
    • Use PHP8 native typehints
    • Drop useless annotations
    • PHP 8.3 compatibility
  • v1.2.2 1.2.2

    • Support nette/utils 4
  • v1.2.1 1.2.1

    • Explicitly restrict maximum supported PHP version in composer.json
    • PHP 8.2 compatibility
  • v1.2.0 1.2.0

    • PHP 8.1 compatibility.
  • v1.1.0 1.1.0

    • PHP 8.0 compatibility.
  • v1.0.0 1.0.0

    • Initial release.
bar-chart-fill

Statistics

download-cloud-fill
4138
star-fill
7
bug-fill
0
flashlight-fill
18d
price-tag-2-line

Badges

guide-fill

Dependencies

php (>=7.4.0)
nette/application (^3.0.2@dev)
nette/forms (^3.0@dev)
nette/utils (^3.1.1@dev)
Componette Componette felix@nette.org