Da un punto di vista tecnico sono completamente diversi. <datalist>
è un contenitore astratto di opzioni per altri elementi. Nel tuo caso l'hai usato con <input type="text"
ma puoi anche usarlo con intervalli, colori, date ecc. Http://demo.agektmr.com/datalist/
Se lo si utilizza con l'immissione di testo, come tipo di completamento automatico, la domanda è davvero: è meglio utilizzare un input di testo in formato libero o un elenco predeterminato di opzioni? In tal caso, penso che la risposta sia un po 'più ovvia.
Se ci concentriamo sull'uso di <datalist>
come un elenco di opzioni per un campo di testo, ecco alcune differenze specifiche tra quella e una casella di selezione:
- Una
<datalist>
casella di testo alimentata ha una singola stringa sia per l'etichetta di visualizzazione che per l'invio. Una casella di selezione può avere un valore di invio diverso rispetto all'etichetta di visualizzazione <option value='ie'>Internet Explorer</option>
.
- Una
<datalist>
casella di testo alimentata non supporta il <optgroup>
tag per organizzare la visualizzazione.
- Non puoi limitare un utente all'elenco di opzioni
<datalist>
come puoi con a <select>
.
- L' evento onchange funziona in modo diverso. Su un
<select>
elemento, l'evento onchange viene generato immediatamente al momento della modifica, mentre con <input type="text"
l'evento viene generato dopo che l'elemento perde la messa a fuoco o l'utente preme invio.
<datalist>
ha un supporto davvero discutibile su tutti i browser. Il modo di mostrare tutte le opzioni disponibili è incoerente e le cose peggiorano solo da lì.
L'ultimo punto è davvero il più grande secondo me. Dato che DEVI avere un fallback del completamento automatico più universale, non c'è quasi motivo di affrontare il problema di configurare a <datalist>
. Inoltre, qualsiasi plug-in di completamento automatico decente consentirà di modellare il display delle opzioni, il che <datalist>
non funziona. Se <datalist>
accettassi <li>
elementi che potresti manipolare come vuoi, sarebbe stato davvero grandioso! Ma no.
Inoltre, per quanto posso dire, la <datalist>
ricerca è una corrispondenza esatta dall'inizio della stringa. Quindi, se lo avessi fatto <option value="internet explorer">
e avessi cercato "explorer", non otterrai risultati. La maggior parte dei plug-in di completamento automatico cercherà ovunque nel testo.
Ho usato solo <datalist>
un aiuto rapido e pigro per alcune pagine interne in cui so con certezza al 100% che gli utenti hanno l'ultimo Chrome o Firefox e non proveranno a inviare valori fasulli. Per ogni altro caso, è difficile consigliarne l'uso a <datalist>
causa del supporto del browser molto scarso.