Preencher formulários às vezes parece uma coisa complicada. É importante oferecer várias opções aos usuários, mas permitir que eles digitem livremente. O elemento datalist, que acabou de chegar ao Chrome Canary (M20), facilita muito isso.
Ao usar datalist, o app pode definir uma lista de resultados sugeridos para os usuários escolherem. Eles podem selecionar uma opção da lista ou inserir um texto livre.
As opções podem ser pareadas com um datalist especificando o id no atributo list de um elemento input:
<input type="text" value="" list="fruits" />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Orange"></option>
<option value="Peach"></option>
</datalist>
O datalist está disponível nas versões mais recentes do Firefox, Opera e Internet Explorer, a partir da versão 10. Não se preocupe muito com a compatibilidade, mas, se quiser ter certeza de que o recurso funciona em todos os navegadores, faça o seguinte:
<datalist id="fruits">
Pick your favorite fruit
<select name="fruit_sel">
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Peach">Peach</option>
</select>
or type one.
</datalist>
<input type="text" name="fruit" value="" list="fruits" />
Se o datalist estiver disponível no navegador, tudo abaixo dele, exceto os elementos option, será ocultado.datalist Se você usar esse mecanismo alternativo, verifique se o servidor captura "fruit_sel" e "fruit" como parâmetros de consulta.