Flexdatalist - automaatse täiendamise plugin
The HTML5 element on üsna kasulik tänapäeva esirinnas. Kuid see on üks neist elementidest, mida paljud arendajad ei tea.
See töötab sisendväljal, kus saate teatud sisendite väärtuste automaatne suurendamine. Vaikimisi häälestus tundub hästi ja oleme katnud mõningaid kodeerimisnõudeid laheda efekti loomiseks autosuggest datalists'iga.
Siiski on see palju lihtsam töötage pluginaga nagu näiteks Flexdatalist. See toetab laiemat hulka brausereid ja võimaldab teil kohandage oma datalisti disaini täielikult.
Mitte kõigil ei ole vaja automaatse täiendamise funktsioone ja natiivsete HTML5 datalistidega ei pruugi te pluginaga häirida. Kuid Flexdatalist on ilmselt parim, sest see on tugineb kohalikule datalistlikule käitumisele Lisama:
- Mobiilne reageeriv tugi
- Iga elemendi täiendavad kirjeldused
- Mitme valiku suvandid korraga
- Kohandatud sündmuste käitlejad
See on kõik on powered by jQuery, nii et sa tahad vajavad uusima versiooni koopiat selle käivitamiseks. See samuti kaasas oma CSS-laaditabel HTTP taotluste vähendamiseks võiksite kombineerida ühe CSS-faili.
Leiad täielik seadistusjuhend peamisel demo lehel, mis sisaldab Flexdatalisti failide linkide allalaadimine.
See on väga lihtne seadistada ainult üks rida JavaScript. Vaikimisi on plugin sihib kõiki klassi sisendeid .flexdatalist, nii et lihtsalt lisage, et oma koodile piisab tulemuste vaatamiseks.
Lisage lihtsalt sisendvälja sees ja Flexdatalist käsitseb ülejäänud. See läheb loendi automaatne laadimine, sealhulgas vabatahtlik kirjeldav tekst.
Lihtsaim viis lisateksti lisamiseks on JSON-faili kaudu mida saate lisage oma sisendile andmete atribuut.
Näiteks kui vaatate läbi Flexdatalisti demo lehekülje, leiad a “Riigid” atribuudiga sisendvälja data-data = 'countries.json'. See viitab kaugfailile salvestab kõik toores sisendandmed väliselt.
Liiga palju neid välju saab aeglustage lehekülge veidi. Kuid ma ei suuda ette kujutada, et paljud saidid töötaksid ühel lehel rohkem kui mõni neist datalisti vormidest, rääkimata isegi sellest jQuery pluginast, nad on ikka päris kiire.
Alustamiseks lihtsalt külastage GitHub repot ja laadige alla koopia. See hõlmab a link peamisele demo lehele mis sisaldab ka täielikku dokumentatsiooni seadistamise, JavaScripti suvandite ja rohkete proovikoodi väljavõtete jaoks, et minna ümber.
