Automatinis užbaigimas naudojant „jQuery“ vartotojo sąsają

Internete yra daug papildinių, leidžiančių pridėti šią funkciją prie mūsų svetainės, tačiau jie yra sukurti pagal programavimo schemą, apie kurią mes galbūt nežinome, o tada jų modifikavimas ir diegimas paprastai yra šiek tiek varginantis ir sudėtingas. Tačiau nuo to laiko viskas neprarasta „jQuery“ ir jos išplėtimas bibliotekose „jQuery“ vartotojo sąsaja jie atneša mums keletą metodų, kaip be didesnio galvos skausmo įdiegti mūsų svetainėje automatinio užbaigimo funkciją.
Prieš pradėdami pavyzdį, pažiūrėkime automatinio užbaigimo metodą ir kaip jis veikia.
Automatinio užbaigimo () metodas
Metodas automatinis užbaigimas galima naudoti dviem būdais:

$ (parinkiklis, kontekstas) .autocomplete (parinktys) $ (selektorius, kontekstas) .autocomplete („veiksmas“, parametrai)

Šis metodas pareiškia, kad HTML turi būti valdomas kaip laukas, kuriame rodomas pasiūlymų sąrašas, parinktys nurodo šio sąrašo elgseną tuo metu, kai vartotojas pradeda rašyti lauke.
Iš teksto lauke įvestų simbolių lyginama su šaltinio parinktyse esančiomis reikšmėmis.
Pažiūrėkime praktinį pavyzdį, kad tai būtų geriau:
1- Pirmiausia įtraukiame reikiamus failus:

2- Sukuriame kintamąjį, kuriame yra žodžiai, kurie bus pasiūlymų, kuriuos galima automatiškai užbaigti, sąrašas, pasiūlymų sąrašą taip pat galima pateikti iš JSONAS ir net nuo a XML, netgi šiek tiek išplėsdami funkcionalumą pridėdami ajax, tačiau šiame pavyzdyje mes naudosime kintamąjį, kad nesudėtytume sunkumų:

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

3- Mes iškviečiame metodą, susiejame su juo selektorių ir suteikiame jam parametrą kaip parinktį šaltinis Nurodykite, kur gauti pasiūlymų sąrašą:

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

4- Norėdami užbaigti HTML, sukuriamekuriame bus mūsų įvestis, kuri bus ta, kuri įgyvendina automatinį užbaigimą:

Žymos:

Po įgyvendinimo jis turėtų būti maždaug toks:

Galiausiai paliksiu jums visą kodą, kad galėtumėte jį išbandyti patys, nepamiršdami, kad galime užpildyti savo pasiūlymų sąrašą iš įvairių galiojančių šaltinių ir pritaikydami įvairias parinktis bei įvykius, kurie padidins mūsų komponento funkcionalumą.

 „jQuery“ vartotojo sąsajos automatinis užbaigimas - numatytoji funkcijaŽymos:

Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką