Completați automat cu UI jQuery

Există multe pluginuri pe internet care ne permit să adăugăm această funcționalitate pe site-ul nostru, cu toate acestea sunt dezvoltate sub o schemă de programare despre care s-ar putea să nu știm și apoi modificarea și implementarea lor sunt de obicei oarecum plictisitoare și complicate. Dar totul nu este pierdut de atunci jQuery și extinderea sa de biblioteci UI jQuery ele ne aduc câteva metode de implementare a funcționalității de completare automată pe site-ul nostru fără mari dureri de cap.
Înainte de a trece printr-un exemplu, să vedem metoda de completare automată și cum funcționează.
Metoda de completare automată ()
Metoda completare automată poate fi folosit în două moduri:

$ (selector, context) .autocomplete (opțiuni) $ (selector, context) .autocomplete ("acțiune", parametri)

Această metodă declară că un cod HTML trebuie să fie gestionat ca un câmp care afișează o listă de sugestii, opțiunile specifică comportamentul acestei liste în momentul în care utilizatorul începe să tasteze în câmp.
Dintre caracterele introduse în câmpul text, se face o comparație cu valorile conținute în opțiunile sursă.
Să vedem un exemplu practic pentru a-l vedea mai bine:
1- Mai întâi includem fișierele necesare:

2- Creăm o variabilă care conține cuvintele care vor fi lista de sugestii disponibile pentru completarea automată, lista de sugestii poate fi alimentată și dintr-o JSON și chiar de la o XML, chiar extinzând puțin funcționalitatea adăugând ajax, dar în acest exemplu vom folosi o variabilă pentru a nu complica lucrurile:

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- Invocăm metoda, asociem selectorul cu aceasta și îi oferim parametrul ca opțiune sursă Vă spun de unde puteți obține lista de sugestii de la:

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

4- Pentru a finaliza în HTML, creăm uncare va conține informațiile noastre care vor fi cele care implementează completarea automată:

Etichete:

După implementare, ar trebui să fie așa ceva:

În cele din urmă, vă voi lăsa codul complet, astfel încât să îl puteți testa pentru dvs., fără a uita că putem completa lista noastră de sugestii din diverse surse valide și aplicând diferite opțiuni și evenimente care vor spori funcționalitatea componentei noastre.

 Completare automată UI jQuery - Funcționalitate implicităEtichete:

V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv