Tag datalist

A tag datalist cria uma opção de preenchimento automático para campos de entrada input em um formulário HTML.

A essência do preenchimento automático é: quando o usuário tentar digitar algo no campo de entrada, uma dica de contexto irá aparecer abaixo, representando uma lista de opções disponíveis para escolha. O usuário poderá selecionar uma das opções sugeridas, sem precisar digitá-la completamente.

Para vincular uma opção de preenchimento automático a uma tag input, é necessário definir o atributo list nela, no qual deve ser especificado o atributo id da tag datalist que está sendo vinculada.

As opções de escolha são armazenadas em tags option, que por sua vez estão contidas dentro da tag datalist.

Exemplo

Vamos inserir um país no campo de entrada. Vamos digitar primeiro a letra 'b' - e veremos uma dica de contexto aparecendo com três países. Em seguida, digitamos também a letra 'e' - o número de países sugeridos será reduzido para dois:

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

Exemplo

Agora vamos adicionar o atributo value à tag option. Ao selecionar um determinado país, o que será inserido no input vinculado não é o nome do país, mas o conteúdo do atributo value:

<input type="text" list="country-value">
<datalist id="country-value">
	<option value="Belarus">Belarus - a country of lakes and potatoes</option>
	<option value="Belgium">Belgium - a country where Belgians live</option>
	<option value="Bulgaria">Bulgaria - a country for vacation</option>
</datalist>

Exemplo . Influência do atributo autocomplete

O atributo autocomplete influencia a lista suspensa de sugestões. Se estiver ativado (que é o padrão), aos valores que você definiu na tag datalist serão misturados os valores que o usuário inseriu anteriormente neste campo.

Digite 'Brazil' no campo e clique no botão de envio (sem o envio, o navegador não memorizará este país). Depois, volte a este exemplo e digite a letra 'b' - na lista que aparece você verá não apenas 3 países do datalist, mas também o país digitado anteriormente (além disso, se você fizer o mesmo com a palavra 'Belarus' - na lista suspensa este valor aparecerá duas vezes).

Se isso atrapalhar - desative o atributo autocomplete, adicionando a ele o valor off.

Faça as manipulações descritas acima com o exemplo:

<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>

Veja também

o atributo autocomplete,
que define o preenchimento automático para campos de formulário