Autofullfør med jQuery UI

Det er mange plugins på internett som lar oss legge denne funksjonaliteten til nettstedet vårt, men de er utviklet under et programmeringsopplegg som vi kanskje ikke vet om, og da er modifikasjonen og implementeringen vanligvis litt kjedelig og komplisert. Men alt er ikke tapt siden jQuery og utvidelsen av biblioteker jQuery UI de gir oss noen metoder for å implementere autofullføringsfunksjonaliteten på nettstedet vårt uten mye hodepine.
Før vi går gjennom et eksempel, la oss se autofullføringsmetoden og hvordan den fungerer.
Autofullføringsmetoden ()
Metoden autofullføring kan brukes på to måter:

$ (velger, kontekst) .autofullfør (alternativer) $ (velger, kontekst) .autofullfør ("handling", params)

Denne metoden erklærer at en HTML må administreres som et felt som viser en liste med forslag, alternativene angir oppførselen til denne listen i det øyeblikket brukeren begynner å skrive i feltet.
Av tegnene som er angitt i tekstfeltet, gjøres en sammenligning med verdiene i kildealternativene.
La oss se et praktisk eksempel for å se det bedre:
1- Først inkluderer vi de nødvendige filene:

2- Vi lager en variabel som inneholder ordene som vil være listen over forslag som er tilgjengelige for autofullføring, listen over forslag kan også mates fra en JSON og til og med fra en XML, til og med utvide funksjonaliteten litt ved å legge til ajax, men i dette eksemplet vil vi bruke en variabel for ikke å komplisere 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åkaller metoden, knytter velgeren til den og gir den parameteren som et alternativ kilde Forteller deg hvor du kan få listen over forslag fra:

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

4- For å fullføre i vår HTML lager vi ensom vil inneholde våre innspill som vil være den som implementerer autofullføringen:

Etiketter:

Etter implementeringen bør det være noe slikt:

Til slutt skal jeg gi deg den komplette koden slik at du kan teste den selv, uten å glemme at vi kan fylle ut vår liste over forslag fra forskjellige gyldige kilder og bruke forskjellige alternativer og hendelser som vil øke funksjonaliteten til komponenten vår.

 jQuery UI Autofullfør - StandardfunksjonalitetEtiketter:

Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng