Автодовършване с jQuery потребителски интерфейс

В интернет има много плъгини, които ни позволяват да добавим тази функционалност към нашия сайт, но те са разработени по схема за програмиране, за която може да не знаем, а след това тяхното модифициране и внедряване обикновено е досадно и сложно. Но оттогава не всичко е загубено jQuery и нейното разширяване на библиотеки jQuery потребителски интерфейс те ни предлагат някои методи за внедряване на функцията за автоматично довършване на нашия сайт без много главоболие.
Преди да преминем през пример, нека да видим метода за автоматично довършване и как работи.
Методът за автоматично довършване ()
Методът автодовършване може да се използва по два начина:

$ (селектор, контекст) .autocomplete (опции) $ (selector, context) .autocomplete ("действие", params)

Този метод декларира, че HTML трябва да се управлява като поле, което показва списък с предложения, като опциите определят поведението на този списък в момента, в който потребителят започне да въвежда в полето.
От символите, въведени в текстовото поле, се прави сравнение със стойностите, съдържащи се в опциите за източник.
Нека да видим практически пример, за да го видим по -добре:
1- Първо включваме необходимите файлове:

2- Създаваме променлива, която съдържа думите, които ще бъдат списъка с предложения, налични за автоматично довършване, списъкът с предложения може също да се подава от JSON и дори от а XML, дори разширяване на функционалността малко чрез добавяне на ajax, но в този пример ще използваме променлива, за да не усложняваме нещата:

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

3- Извикваме метода, свързваме селектора с него и му даваме параметъра като опция източник Казвайки ви откъде да получите списъка с предложения от:

 $ ("#тагове") .autocomplete ({източник: availableTags}); 

4- За да завършим в нашия HTML, създавамекойто ще съдържа нашия вход, който ще бъде този, който прилага автодовършването:

Етикети:

След внедряването трябва да е нещо подобно:

И накрая, ще ви оставя пълния код, за да можете сами да го тествате, без да забравяме, че можем да попълним нашия списък с предложения от различни валидни източници и да приложим различни опции и събития, които ще увеличат функционалността на нашия компонент.

 jQuery UI Autocomplete - Функция по подразбиранеЕтикети:

Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка