Flexdatalist - Plugin di completamento automatico con supporto
Il HTML5 elemento è abbastanza utile nel moderno sviluppo di frontend. Eppure, è uno di quegli elementi che non molti sviluppatori conoscono.
Funziona su un campo di input dove puoi autosuggest determinati valori per l'input. La configurazione di default sembra a posto e abbiamo coperto alcuni suggerimenti di codifica sulla creazione di fantastici effetti con i datalists autosuggest.
Tuttavia, è molto più facile funziona con un plugin ad esempio Flexdatalist. esso supporta una gamma più ampia di browser e ti permette di personalizzare completamente il design del tuo datalist.
Non tutti hanno bisogno di funzionalità di completamento automatico e con i datalisti HTML5 nativi, potresti non preoccuparti di un plug-in. Tuttavia, Flexdatalist è forse il migliore in circolazione perché si basa su comportamenti nativi dei datalisti aggiungere:
- Supporto mobile di risposta
- Descrizioni extra per ogni oggetto
- Opzioni per più selezioni contemporaneamente
- Gestori di eventi personalizzati
Suo tutto alimentato da jQuery, così lo farai serve una copia dell'ultima versione per farlo funzionare. Anche viene fornito con un proprio foglio di stile CSS che potresti voler combinare in un singolo file CSS per ridurre le richieste HTTP.
Potete trovare istruzioni complete per la configurazione sulla pagina demo principale che include scaricare i collegamenti ai file Flexdatalist.
È davvero semplice da configurare, con solo una singola riga di JavaScript. Di default, il plugin targetizza tutti gli input con la classe .flexdatalist, quindi aggiungerlo al tuo codice dovrebbe essere sufficiente per vedere i risultati.
Devi solo aggiungere il elemento all'interno del campo di input e Flexdatalist gestisce il resto. Sara auto-stile l'elenco, incluso testo descrittivo opzionale.
Il modo più semplice per aggiungere testo extra è attraverso un file JSON quale puoi allegare al proprio input tramite un attributo di dati.
Ad esempio, se controlli la pagina dimostrativa di Flexdatalist troverai a “paesi” campo di input con l'attributo -dati di dati = 'countries.json'. Questo fa riferimento a un file remoto che memorizza esternamente tutti i dati di input non elaborati.
Troppi di questi campi puoi rallenta un po 'la pagina. Tuttavia, non riesco a immaginare che molti siti possano eseguire più di questi moduli datalist su una sola pagina, per non parlare anche con questo plugin jQuery, sono ancora piuttosto veloce.
Per iniziare, solo visita il repository GitHub e scarica una copia. Questo include a link alla pagina demo principale che ha anche una documentazione completa per l'installazione, le opzioni JavaScript e un sacco di frammenti di codice di esempio per andare in giro.
