Automatsko dovršavanje pomoću sučelja jQuery

Na internetu postoji mnogo dodataka koji nam omogućuju dodavanje ove funkcionalnosti na našu web stranicu, no oni su razvijeni prema programskoj shemi za koju možda ne znamo, a tada su njihove izmjene i implementacija obično pomalo dosadne i komplicirane. Ali od tada nije sve izgubljeno jQuery i njegovo proširenje knjižnica sučelje jQuery donose nam neke metode za implementaciju funkcije automatskog dovršavanja na našoj web stranici bez velike glavobolje.
Prije nego prođemo kroz primjer, pogledajmo metodu automatskog dovršavanja i kako ona funkcionira.
Metoda autocomplete ()
Način automatsko dovršavanje može se koristiti na dva načina:

$ (selektor, kontekst) .autokompletno (opcije) $ (selektor, kontekst) .autokompletno ("radnja", parametri)

Ova metoda izjavljuje da se HTML -om mora upravljati kao poljem koje prikazuje popis prijedloga, a opcije određuju ponašanje ovog popisa u trenutku kada korisnik počne upisivati ​​u polje.
Od znakova upisanih u tekstualno polje vrši se usporedba s vrijednostima sadržanim u izvornim opcijama.
Pogledajmo praktični primjer da bismo to bolje vidjeli:
1- Prvo uključujemo potrebne datoteke:

2- Izrađujemo varijablu koja sadrži riječi koje će biti popis prijedloga dostupnih za automatsko dovršavanje, a popis prijedloga također se može unijeti iz JSON pa čak i od a XML, čak i proširujući funkcionalnost dodavanjem ajaxa, ali u ovom primjeru koristit ćemo varijablu kako ne bismo komplicirali:

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

3- Pozivamo metodu, povezujemo birač s njom i dajemo joj parametar kao opciju izvor Govoreći vam odakle možete dobiti popis prijedloga:

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

4- Za kraj u našem HTML -u stvaramokoji će sadržavati naš unos koji će biti taj koji implementira automatsko dovršavanje:

Oznake:

Nakon implementacije to bi trebalo biti otprilike ovako:

Konačno, ostavit ću vam cijeli kôd kako biste ga sami testirali, ne zaboravljajući da možemo ispuniti naš popis prijedloga iz različitih valjanih izvora i primijeniti različite opcije i događaje koji će povećati funkcionalnost naše komponente.

 jQuery UI Automatsko dovršavanje - Zadana funkcionalnostOznake:

Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod