Flexdatalist - Dodatak za automatsko dovršavanje s podrškom
HTML5 element je vrlo korisno u suvremenom razvoju sučelja. Ipak, to je jedan od onih elemenata za koje mnogi programeri ne znaju.
Radi na polju za unos gdje možete automatsko predlaganje određenih vrijednosti za ulaz. Zadana postavka izgleda dobro i pokrili smo neke savjete za kodiranje o stvaranju izvrsnih efekata s automatskim predlaganjem podataka.
Međutim, mnogo je lakše rad s dodatkom kao što su Flexdatalist. To podržava širi raspon preglednika i omogućuje vam potpuno prilagodite dizajn vašeg podatkovnog lista.
Nemaju svi potrebu za značajkama automatskog dovršavanja i s izvornim HTML5 datalistima, možda se nećete zamarati dodatkom. Međutim, Flexdatalist je možda najbolji ondje jer to gradi se na izvornim datalističkim ponašanjima dodati:
- Podrška za mobilne uređaje
- Dodatni opisi za svaku stavku
- Mogućnosti višestrukog odabira odjednom
- Prilagođeni rukovatelji događajima
to je sve pokreće jQuery, tako ćete i vi trebate kopiju najnovije verzije da bi se to pokrenulo. Također dolazi s vlastitom CSS stilskom listom koje možete kombinirati u jednu CSS datoteku da biste smanjili HTTP zahtjeve.
Možeš naći pune upute za postavljanje na glavnoj demo stranici koja uključuje preuzmite linkove na Flexdatalist datoteke.
Jednostavno je postaviti, s samo jedan redak JavaScripta. Prema zadanim postavkama dodatak cilja sve ulaze s razredom .flexdatalist
, tako da samo dodavanje da na svoj kôd treba biti dovoljno da biste vidjeli rezultate.
Samo dodajte unutar polja za unos i Flexdatalist obrađuje ostatak. to će automatsko oblikovanje popisa, uključujući i opcionalni opisni tekst.
Najjednostavniji način dodavanja dodatnog teksta je putem JSON datoteke što možete priložite svom unosu putem atributa podataka.
Na primjer, ako pogledate demo stranicu Flexdatalist, pronaći ćete “zemlje” polje za unos s atributom podaci-podatka = 'countries.json'
. To upućuje na udaljenu datoteku pohranjuje sve neobrađene ulazne podatke izvana.
Previše ovih polja možete usporite stranicu malo. Međutim, ne mogu zamisliti da bi mnoge web-lokacije izvodile više od nekoliko ovih obrazaca datalista na jednoj stranici, a da ne spominjemo čak ni s ovim dodatkom jQuery. još uvijek prilično brzo.
Da biste započeli, samo posjetite GitHub repo i preuzmite kopiju. To uključuje: a link na glavnu demo stranicu koji također ima punu dokumentaciju za postavljanje, opcije JavaScripta i obilje primjeraka isječaka koda za obilazak.