Flexdatalist - Complet de completare automată cu
HTML5 element este destul de utilă în dezvoltarea modernă a frontend-urilor. Totuși, este unul dintre acele elemente despre care nu știu mulți dezvoltatori.
Funcționează pe un câmp de introducere unde poți autosuggest anumite valori pentru intrare. Setarea implicită arată bine și am acoperit câteva sfaturi de codificare pentru a construi efecte interesante cu ajutorul datelor de autosuggest.
Cu toate acestea, este mult mai ușor să lucrați cu un plugin precum Flexdatalist. Aceasta acceptă o gamă mai largă de browsere și vă permite să personalizați pe deplin designul datalistului dvs..
Nu toată lumea are nevoie de funcții de completare automată și cu datele HTML5 native, este posibil să nu vă deranjezi cu un plugin. Cu toate acestea, Flexdatalist este probabil cel mai bun acolo pentru că se bazează pe comportamentele dataliste native a adauga:
- Asistență mobilă receptivă
- Descrieri suplimentare pentru fiecare element
- Opțiuni pentru selecții multiple simultan
- Operatori de evenimente personalizate
este toate alimentate de jQuery, așa vei face aveți nevoie de o copie a celei mai recente versiuni pentru a face acest lucru rulează. De asemenea vine cu propria foaie de stil CSS pe care ați putea dori să le combinați într-un singur fișier CSS pentru a reduce cererile HTTP.
Puteți găsi instrucțiuni complete de configurare pe principala pagină demo care include descărcați link-uri către fișierele Flexdatalist.
Este foarte simplu de configurat, cu doar o singură linie de JavaScript. Implicit, pluginul vizează toate intrările cu clasa .flexdatalist, astfel încât doar adăugarea la codul dvs. ar trebui să fie suficient pentru a vedea rezultatele.
Doar adăugați element în interiorul câmpului de introducere și Flexdatalist se ocupă de restul. Se va autocolant lista, inclusiv text descriptiv opțional.
Cea mai simplă modalitate de a adăuga un text suplimentar este printr-un fișier JSON pe care le puteți atașați la intrare printr-un atribut de date.
De exemplu, dacă accesați pagina demo Flexdatalist, veți găsi o “ţări” câmp de introducere cu atributul -date de date = 'countries.json'. Acest lucru face referire la un fișier la distanță care stochează toate datele de intrare brute externe.
Prea multe dintre aceste domenii poți încetiniți puțin pagina. Cu toate acestea, nu îmi pot imagina că multe site-uri vor rula mai mult de câteva dintre aceste formulare de date la o singură pagină, fără a mai menționa chiar și cu acest plugin jQuery, încă destul de repede.
Pentru a începe, pur și simplu vizitați repo GitHub și descărcați o copie. Aceasta include a link la pagina principală de demo care are, de asemenea, o documentație completă pentru configurare, opțiuni JavaScript și o mulțime de fragmente de cod exemplu pentru a merge în jur.
