Automātiskā pabeigšana ar jQuery lietotāja saskarni

Internetā ir daudz spraudņu, kas ļauj mūsu vietnei pievienot šo funkcionalitāti, tomēr tie ir izstrādāti saskaņā ar programmēšanas shēmu, par kuru mēs, iespējams, nezinām, un tad to modificēšana un ieviešana parasti ir nedaudz garlaicīga un sarežģīta. Bet kopš tā laika viss nav zaudēts jQuery un bibliotēku paplašināšana jQuery lietotāja saskarne tie mums piedāvā dažas metodes, kā mūsu vietnē bez lielām galvassāpēm ieviest automātiskās pabeigšanas funkcionalitāti.
Pirms piemēra apskatīšanas apskatīsim automātiskās pabeigšanas metodi un to, kā tā darbojas.
Automātiskās pabeigšanas () metode
Metode automātiskā pabeigšana var izmantot divos veidos:

$ (atlasītājs, konteksts) .autocomplete (opcijas) $ (atlasītājs, konteksts) .autocomplete ("darbība", parametri)

Šī metode paziņo, ka HTML ir jāpārvalda kā lauks, kurā tiek parādīts ieteikumu saraksts, opcijas nosaka šī saraksta darbību brīdī, kad lietotājs sāk rakstīt laukā.
No teksta laukā ievadītajām rakstzīmēm tiek veikts salīdzinājums ar avota opcijās ietvertajām vērtībām.
Apskatīsim praktisku piemēru, lai to labāk redzētu:
1- Vispirms mēs iekļaujam nepieciešamos failus:

2- Mēs izveidojam mainīgo, kurā ir vārdi, kas būs automātiskai pabeigšanai pieejamo ieteikumu saraksts; ieteikumu sarakstu var ievadīt arī no JSON un pat no a XML, pat nedaudz paplašinot funkcionalitāti, pievienojot ajax, taču šajā piemērā mēs izmantosim mainīgo, lai nesarežģītu lietas:

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- Mēs izsaucam metodi, saistām ar to selektoru un dodam tam parametru kā opciju avots Pastāstiet, kur iegūt ieteikumu sarakstu:

 $ ("#tagi") .autocomplete ({avots: availableTags}); 

4- Lai pabeigtu HTML, mēs izveidojamkurā būs mūsu ievade, kas būs tā, kas ieviesīs automātisko pabeigšanu:

Tagi:

Pēc ieviešanas tam vajadzētu būt apmēram šādam:

Visbeidzot, es atstāšu jums pilnu kodu, lai jūs varētu to pārbaudīt pats, neaizmirstot, ka mēs varam aizpildīt mūsu ieteikumu sarakstu no dažādiem derīgiem avotiem un piemērot dažādas iespējas un notikumus, kas palielinās mūsu komponenta funkcionalitāti.

 jQuery lietotāja saskarnes automātiskā pabeigšana - noklusējuma funkcionalitāteTagi:

Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu