Il tag datalist

Il tag datalist crea un autocompletamento per i campi di input input nei moduli HTML.

L'essenza dell'autocompletamento: quando l'utente tenta di digitare qualcosa nel campo di input, apparirà un suggerimento a comparsa in basso, che rappresenterà un elenco di opzioni disponibili tra cui scegliere. L'utente potrà selezionare una delle opzioni proposte, senza doverla digitare completamente.

Per associare l'autocompletamento a un tag input, è necessario assegnargli l'attributo list, in cui specificare l'attributo id del tag datalist da associare.

Le opzioni di scelta sono memorizzate nei tag option, che a loro volta si trovano all'interno del tag datalist.

Esempio

Inseriamo un paese nel campo di input. Iniziamo digitando la lettera 'b' - e vedremo un suggerimento a comparsa con tre paesi. Poi digitiamo anche la lettera 'e' - il numero di paesi proposti si ridurrà a due:

<input type="text" list="country">
<datalist id="country">
	<option>Belarus</option>
	<option>Belgium</option>
	<option>Bulgaria</option>
</datalist>

Esempio

Aggiungiamo ora l'attributo value al tag option. Quando si seleziona un determinato paese, nell'input associato non apparirà il nome del paese, ma il contenuto dell'attributo value:

<input type="text" list="country-value">
<datalist id="country-value">
	<option value="Belarus">Belarus - un paese di laghi e patate</option>
	<option value="Belgium">Belgium - un paese dove vivono i belgi</option>
	<option value="Bulgaria">Bulgaria - un paese per le vacanze</option>
</datalist>

Esempio . Influenza dell'attributo autocomplete

Sull'elenco a discesa dei suggerimenti influisce l'attributo autocomplete. Se è attivo (e lo è per impostazione predefinita), ai valori che hai impostato nel tag datalist, si mescoleranno i valori che l'utente ha inserito in precedenza in questo campo.

Digita 'Brazil' nel campo e clicca il pulsante di invio (senza l'invio il browser non ricorderà questo paese). Poi torna a questo esempio e digita la lettera 'b' - nell'elenco che appare vedrai non solo 3 paesi dal datalist, ma anche il paese digitato in precedenza (inoltre, se farai lo stesso con la parola 'Belarus' - nell'elenco a discesa questo valore apparirà due volte).

Se questo ti dà fastidio - disattiva l'attributo autocomplete, assegnandogli il valore off.

Prova le manipolazioni descritte sopra con l'esempio:

<form action="">
	<input type="text" list="country" autocomplete="on">
	<datalist id="country">
		<option>Belarus</option>
		<option>Belgium</option>
		<option>Bulgaria</option>
		<input type="submit">
	</datalist>
</form>

Vedi anche

l'attributo autocomplete,
che imposta l'autocompletamento per i campi del modulo