Modulo HTML: Select-Option vs Datalist-Option

Mi chiedevo quali sono le differenze tra Select-Option e Datalist-Option. C'è qualche situazione in cui sarebbe meglio usare l'uno o l'altro? Di seguito è riportato un esempio di ciascuno:

Selezionare l'opzione

<select name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>

Datalist-Option

<input type=text list=browsers>
<datalist id=browsers>
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Pensalo come la differenza tra un requisito e un suggerimento. Per l' selectelemento, l'utente è tenuto a selezionare una delle opzioni fornite. Per l' datalistelemento, si suggerisce all'utente di selezionare una delle opzioni fornite, ma in realtà può inserire tutto ciò che desidera nell'input.

Modifica 1: Quindi quello che usi dipende dalle tue esigenze. Se l'utente deve inserire una delle tue scelte, utilizza l' selectelemento. Se l'uso può inserire qualunque cosa, usa l' datalistelemento.

Modifica 2: trovato questo bocconcino nel HTML Living Standard : "Ogni elemento di opzione che discende dall'elemento datalist ... rappresenta un suggerimento."

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.

Datalist include il completamento automatico e i suggerimenti in modo nativo, inoltre può consentire a un utente di immettere un valore che non è definito nei suggerimenti.

Seleziona fornisce solo opzioni predefinite tra cui l'utente deve selezionare

Elenco dati è un nuovo tag HTML nei browser supportati da HTML5. Viene visualizzato come una casella di testo con un elenco di opzioni. Ad esempio per la casella di testo Sesso ti darà le opzioni come Maschio Femmina quando digiti 'M' o 'F' nella casella di testo.

<input list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female> 
</datalist>

Per rispondere in modo specifico a una parte della tua domanda "Esiste una situazione in cui sarebbe meglio usare l'uno o l'altro?", Considera un modulo con sezioni ripetute. Se la sezione ripetuta contiene molti selecttag, optionè necessario eseguire il rendering di s per ciascuna selezione, per ogni riga.

In tal caso, prenderei in considerazione l'utilizzo datalistcon input, poiché lo stesso datalistpuò essere utilizzato per qualsiasi numero di inputs. Ciò potrebbe potenzialmente risparmiare una grande quantità di tempo di rendering sul server e scalare molto meglio su qualsiasi numero di righe.

Ho notato che non esiste alcuna funzione selezionata nel datalist. Ti dà solo la scelta ma non può avere un'opzione predefinita. Non puoi neanche mostrare l'opzione selezionata nella pagina successiva.

C'è un'altra differenza importante tra selecte datalist. Ecco che arriva il fattore di supporto del browser.

select è ampiamente supportato dai browser rispetto al datalist. Dai un'occhiata a questa pagina per il supporto completo del datalist da parte del browser--

Supporto browser datalist

Dove as select è supportato efficacemente in tutti i browser (da IE6 +, Firefox 2+, Chrome 1+ ecc.)

È simile a selezionare, ma il datalist ha funzionalità aggiuntive come il suggerimento automatico. Puoi persino digitare e visualizzare suggerimenti come e quando digiti.

L'utente sarà anche in grado di scrivere elementi che non sono presenti nell'elenco.