La lista de datos llegó a Chrome Canary

Completar formularios a veces puede parecer engorroso. Es importante brindarles a los usuarios opciones múltiples y permitirles que escriban con libertad. Esto es muy sencillo gracias al elemento datalist (que se acaba de instalar en Chrome Canary (M20).

Si usas datalist, tu app puede definir una lista de resultados sugeridos que los usuarios deben seleccionar. Pueden seleccionar una opción de la lista o ingresar texto en formato libre.

Demostración en vivo:

Las opciones se pueden vincular con un datalist si se especifica su id en el atributo list de un elemento input:

<input type="text" value="" list="fruits" />
<datalist id="fruits">
    <option value="Apple"></option>
    <option value="Orange"></option>
    <option value="Peach"></option>
</datalist>

datalist está disponible en las versiones más recientes de Firefox, Internet Explorer y Opera después de la versión 10. Por lo tanto, no tienes que preocuparte demasiado por la compatibilidad, pero si quieres asegurarte de que funcione en todos los navegadores, prueba lo siguiente:

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

Si datalist está disponible en tu navegador, se ocultará todo lo incluido en datalist, excepto los elementos option. Si usas este mecanismo de resguardo, asegúrate de que tu servidor capte “fruit_sel” y “fruit” como parámetros de consulta.