Nette Autocomplete input ve formuláři

Co si představit pod autocomplete vstupním polem?

Vstupní textové pole, které napomáhá uživatelům při psaní tím, že zobrazuje možné hodnoty např. z databáze.

Vytvoření nového projektu

Vytvořil jsem si čistý nette projekt pomocí composeru (Jak nainstalovat Composer)

				
					composer create-project nette/web-project path/to/install
				

Nainstaloval jsem si knihovnu nepada/autocomplete-input

				
					composer require nepada/autocomplete-input
				

V HomepagePresenteru jsem si udělal metodu pro vytvoření formuláře, kde jsem rovnou využil nápovědy z componette

public function createComponentAutocompleteForm(): NetteApplicationUIForm
    {
        $form = new NetteApplicationUIForm;
        $autocompleteInput = $form->addAutocomplete('movie', 'Oblíbený film', function (string $query) {
            $movies = ['Star Wars', 'Star Trek', 'Star Gate',];
            $matches = [];
            foreach ($movies as $movie) {
                if (strpos(strtolower($movie), strtolower($query)) !== false) {
                    $matches[] = $movie;
                }
            }
            return $matches;
        });
        $autocompleteInput->setAutocompleteMinLength(3); // set minimum input length to trigger autocomplete
        return $form;
    }

Uvnitř anonymní funkce function (string $query) { … je pro jednoduchost použito pole místo např. databázového výsledku. Důležité však je, aby návratovou hodnotou bylo vždy array.

Aby se nám výsledky zobrazovaly asynchroně a ne až po obnovení stránky, musíme používat Javascript. V souboru @layout.latte , tak téměř na konci v sekci block scripts doplníme všechny tyto knihovny.

	{block scripts}
		<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
		<script src="https://unpkg.com/[email protected]/dist/typeahead.bundle.min.js"></script>
		<script src="https://unpkg.com/[email protected]/src/assets/netteForms.min.js"></script>
		<script src="https://unpkg.com/@nepada/[email protected]/dist/js/autocomplete-input.min.js"></script>
	{/block}

Pozn. 1: Při rozsáhlejších projektech určitě doporučuji používat npm a webpack.

Pozn. 2: Do budoucna bude jistě fajn, když se balíček @nepada/autocomplete-input odpoutá od závislosti na jQuery, které bude jen volitelné.

Článek je věnován mému zapálenému žákovi, kterým je Jakub Vávrů.