A veces, completar formularios puede ser engorroso. Es importante darles a los usuarios varias opciones y, al mismo tiempo, permitirles escribir libremente. El elemento datalist (que acaba de llegar a Chrome Canary (M20)) facilita mucho esta tarea.
Cuando usas datalist, tu app puede definir una lista de resultados sugeridos entre los que los usuarios deben seleccionar. Pueden seleccionar una opción de la lista o ingresar texto de formato libre.
Para vincular opciones con un datalist, 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, Opera y Internet Explorer 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 que esté debajo de datalist, excepto los elementos option. Si usas este mecanismo de resguardo, asegúrate de que tu servidor detecte “fruta_sel” y “fruta” como parámetros de consulta.