HTML5 Datalist y input. Mostrar sugerencias en un campo input.

Buenas, os voy a enseñar cómo hacer un input en html que pre-cargue una serie de datos para que al ir introduciendo la palabra deseada vaya mostrando una lista de sugerencias.

En  cuanto a la declaracion de la lista se usa la etiqueta <datalist> y su correspondiente etiqueta de cierre </datalist>, para crear el enlace entre el input y el datalist : el valor que hay en el parametro list del input debe ser el mismo valor en el id del datalist.

input[type=text]

Ahora que hemos visto el funcionamiento del datalist en el elemento range, vamos a ver como funciona el datalist con elemento tipo texto, para ello usaremos la misma sintaxis que en el elemento range, solo omitiremos los datos de value,min ymax, para este ejemplo usaremos :

<input type="text" list="nombres">
<datalist id="nombres">
    <option value="abel"></option>
    <option value="abigail"></option>
    <option value="adrian"></option>
    <option value="airan"></option>
    <option value="alberto"></option>
    <option value="claudio"></option>
    <option value="clemente"></option>
    <option value="samuel"></option>
    <option value="sergio"></option>
</datalist>

Y como resultado :

Apesar de que se puede escribir cualquier valor, hemos obtenido un eficiente sistema de sugerencias a puro HTML. Observar que en este caso usamos el parametro value=”valor” para especificar el valor que tendra la opcion del datalist, pero es irrelevante se puede hacer de esta forma o de la forma anterior, dara el mismo resultado.

Nota: No funciona todavía en todos los navegadores.