Autouzupełnianie z jQuery UI

Istnieje wiele wtyczek w Internecie, które pozwalają nam dodać tę funkcjonalność do naszej strony, jednak są one opracowywane według schematu programowania, o którym możemy nie wiedzieć, a wtedy ich modyfikacja i implementacja jest zwykle nieco żmudna i skomplikowana. Ale od tego czasu nie wszystko stracone jQuery i rozszerzenie bibliotek jQuery UI przynoszą nam kilka metod implementacji funkcji autouzupełniania na naszej stronie bez większego bólu głowy.
Zanim przejdziemy przez przykład, zobaczmy jak działa metoda autouzupełniania.
Metoda autouzupełniania ()
Metoda autouzupełnienie można używać na dwa sposoby:

$ (selektor, kontekst) .autocomplete (opcje) $ (selektor, kontekst) .autocomplete ("akcja", parametry)

Ta metoda deklaruje, że HTML musi być zarządzany jako pole, które wyświetla listę sugestii, opcje określają zachowanie tej listy w momencie, gdy użytkownik zaczyna pisać w polu.
Spośród znaków wpisanych w polu tekstowym dokonuje się porównania z wartościami zawartymi w opcjach źródłowych.
Zobaczmy praktyczny przykład, aby zobaczyć to lepiej:
1- Najpierw dołączamy niezbędne pliki:

2- Tworzymy zmienną zawierającą słowa, które będą listą sugestii dostępnych do autouzupełniania, listę sugestii można również zasilić z JSON a nawet od XML, nawet rozszerzając nieco funkcjonalność dodając ajax, ale w tym przykładzie użyjemy zmiennej, aby nie komplikować rzeczy:

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

3- Wywołujemy metodę, kojarzymy z nią selektor i jako opcję podajemy jej parametr źródło Powiem Ci, skąd wziąć listę sugestii:

 $ ("#tags") .autouzupełnianie ({źródło: availableTags}); 

4- Aby zakończyć w naszym HTML, tworzymyktóry będzie zawierał nasze wejście, które będzie tym, który zaimplementuje autouzupełnianie:

Tagi:

Po wdrożeniu powinno wyglądać mniej więcej tak:

Na koniec pozostawię Ci kompletny kod, abyś mógł go sam przetestować, nie zapominając, że możemy wypełnić naszą listę sugestii z różnych ważnych źródeł i zastosować różne opcje i zdarzenia, które zwiększą funkcjonalność naszego komponentu.

 Autouzupełnianie jQuery UI - Domyślna funkcjonalnośćTagi:

Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt