Automatické doplňování s uživatelským rozhraním jQuery

Na internetu je mnoho pluginů, které nám umožňují přidat tuto funkci na naše stránky, nicméně jsou vyvíjeny podle programovacího schématu, o kterém možná nevíme, a pak je jejich úprava a implementace obvykle poněkud zdlouhavé a komplikované. Od té doby ale není vše ztraceno jQuery a jeho rozšíření knihoven Uživatelské rozhraní jQuery přinášejí nám některé metody k implementaci funkcí automatického doplňování na našem webu bez větší bolesti hlavy.
Než si projdeme příklad, podívejme se na metodu automatického doplňování a na to, jak funguje.
Metoda autocomplete ()
Metoda automatické vyplňování lze použít dvěma způsoby:

$ (selector, context) .autocomplete (options) $ (selector, context) .autocomplete ("action", params)

Tato metoda deklaruje, že HTML musí být spravováno jako pole, které zobrazuje seznam návrhů, možnosti určují chování tohoto seznamu v okamžiku, kdy uživatel začne do pole psát.
Ze znaků zadaných do textového pole se provede srovnání s hodnotami obsaženými v možnostech zdroje.
Podívejme se na praktický příklad, abychom to viděli lépe:
1- Nejprve přidáme potřebné soubory:

2- Vytvoříme proměnnou, která obsahuje slova, která budou seznamem návrhů dostupných pro automatické doplňování, seznam návrhů lze také podávat z JSON a dokonce od a XML, dokonce trochu rozšířit funkčnost přidáním ajaxu, ale v tomto příkladu použijeme proměnnou, abychom věci nekomplikovali:

var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C ++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", „Groovy“, „Haskell“, „Java“, „Javascript“, „Lisp“, „Perl“, „PHP“, „Python“, „Ruby“, „Scala“, „Schéma“];

3- Vyvoláme metodu, přiřadíme k ní selektor a dáme mu parametr jako možnost zdroj Řekne vám, odkud získat seznam návrhů:

 $ ("#tags") .autocomplete ({source: availableTags}); 

4- Pro dokončení v našem HTML vytvořímekterý bude obsahovat náš vstup, který bude implementovat automatické dokončování:

Štítky:

Po implementaci by to mělo být něco takového:

Nakonec vám nechám kompletní kód, abyste si jej mohli sami vyzkoušet, aniž bychom zapomněli, že můžeme vyplnit náš seznam návrhů z různých platných zdrojů a použít různé možnosti a události, které zvýší funkčnost naší komponenty.

 Automatické doplňování uživatelského rozhraní jQuery - výchozí funkceŠtítky:

Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod