Utilizando DATALIST para autocompletar inputs HTML
El autocompletado de campos de texto puede mejorar considerablemente la experiencia de usuario. La implementación de esta funcionalidad se realiza mediante JavaScript, frecuentemente asociado a solicitudes Ajax para pedir a servidor una lista de posible valores a medida que el usuario va escribiendo. Desde HTML5 podemos implementar el autocompletado directamente en HTML, sin una sóla línea de JavaScript. Eso sí, para listas de valores muy extensas puede seguir siendo mejor utilizar JavaScript, eso ya depende de cada cuál y de la situación.
¿Cómo se utiliza datalist?
La forma básica de uso de datalist requiere el atributo ID y elementos option contenidos en datalist (se construye de forma similar al elemento select). El HTML básico sería:
<datalist id="colores">
<option value="Azul"></option>
<option value="Amarillo"></option>
<option value="Burdeos"></option>
<option value="Caoba"></option>
<option value="Marrón"></option>
<option value="Naranja"></option>
<option value="Verde"></option>
</datalist>El siguiente paso es asociar el datalist con un input. Esto se consigue estableciendo el atributo LIST en el input deseado con el mismo valor que ID del datalist:
<input list="colores" name="colores" type="text">
Ejemplo
Limitaciones
El autocompletado de inputs con datalist es una funcionalidad muy útil, sin duda, pero tiene sus limitaciones. Una de las más importantes es que permite que el usuario pueda escribir un valor distinto a los de la lista. Es decir, los posibles valores no se limitan a los especificados en las opciones del datalist. Si quieres poner esta limitación tendrás que utilizar el elemento select, implementar alguna técnica de validación con JavaScript o alguna opción de validación de formularios con HTML5.
En mi opinión, tampoco veo factible el uso de datalist para listas de opciones muy largas. ¿Te imaginas un datalist con 3 mil opciones? En estos casos el autocompletado con JavaScript + Ajax sigue siendo la mejor opción para mí.