Autofuldførelse med jQuery UI

Der er mange plugins på internettet, der giver os mulighed for at tilføje denne funktionalitet til vores websted, men de er udviklet under et programmeringsskema, som vi måske ikke kender til, og derefter er deres ændring og implementering normalt lidt kedelig og kompliceret. Men alt er ikke tabt siden jQuery og dens udvidelse af biblioteker jQuery UI de giver os nogle metoder til at implementere autofuldførelsesfunktionen på vores websted uden meget hovedpine.
Inden vi går igennem et eksempel, lad os se metoden til autofuldførelse, og hvordan den fungerer.
Autofuldførelsesmetoden ()
Metoden autofuldførelse kan bruges på to måder:

$ (vælger, kontekst) .autofuldførelse (valgmuligheder) $ (vælger, kontekst) .autofuldførelse ("handling", params)

Denne metode erklærer, at en HTML skal administreres som et felt, der viser en liste med forslag, valgmulighederne angiver adfærden på denne liste i det øjeblik, brugeren begynder at skrive i feltet.
Af de tegn, der er indtastet i tekstfeltet, foretages en sammenligning med værdierne i kildeindstillingerne.
Lad os se et praktisk eksempel for at se det bedre:
1- Først inkluderer vi de nødvendige filer:

2- Vi opretter en variabel, der indeholder de ord, der vil være listen over forslag, der er tilgængelige til autofuldførelse, listen over forslag kan også fodres fra en JSON og endda fra en XML, endda udvide funktionaliteten lidt ved at tilføje ajax, men i dette eksempel vil vi bruge en variabel for ikke at komplicere ting:

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- Vi påberåber metoden, forbinder vælgeren med den og giver den parameteren som en mulighed kilde Fortæller dig, hvor du kan få listen over forslag fra:

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

4- For at afslutte i vores HTML opretter vi ender vil indeholde vores input, der vil være den, der implementerer autofuldførelsen:

Tags:

Efter implementeringen skal det være sådan her:

Endelig vil jeg efterlade dig den komplette kode, så du kan teste den selv uden at glemme, at vi kan udfylde vores liste over forslag fra forskellige gyldige kilder og anvende forskellige muligheder og begivenheder, der øger funktionaliteten af ​​vores komponent.

 jQuery UI Autofuldførelse - StandardfunktionalitetTags:

Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt