a lista de dados está disponível no Chrome Canary

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.

Demonstração ao vivo:

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.