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

Às vezes, preencher formulários pode parecer complicado. É importante oferecer aos usuários várias opções, mas permitir que eles digitem livremente. O elemento datalist, que acabou de chegar ao Chrome Canary (M20), facilita esse processo.

Usando datalist, seu app pode definir uma lista de resultados sugeridos para os usuários selecionarem. Ele pode selecionar uma opção da lista ou inserir um texto de formato livre.

Demonstração ao vivo:

As opções podem ser pareadas com um datalist especificando a 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 para a versão 10 do Firefox, do Opera e do Internet Explorer mais recentes. Assim, você não precisa se preocupar muito com a compatibilidade, mas se quiser garantir que ela funcione em vários navegadores, tente 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 datalist estiver disponível no navegador, tudo em datalist, exceto os elementos option, ficará oculto. Se você usar esse mecanismo substituto, certifique-se de que o servidor capture "fruit_sel" e "fruit" como parâmetros de consulta.