Como utilizar la etiqueta Datalist HTML 5

Hola a todos, hoy os voy a explicar como funciona la etiqueta datalist en HTML.

Datalist es una de las nuevas etiquetas de HTML 5 que nos permite hacer un autocompletador de una forma muy sencilla.

Para usar la etiqueta datalist, necesitamos un input con un id que coincida con el id que pongamos en el datalist. Dentro del mismo, tendremos una serie de etiquetas option, que serán las coincidencias que se irán filtrando según vayamos escribimos en el input.

<label>Escribe un país: </label>
<input list="paises" type="text" /><datalist id="paises">
<option value="España"></option>
<option value="Francia"></option>
<option value="Portugal"></option>
<option value="Reino Unido"></option>
<option value="Finlandia"></option>
<option value="Filipinas"></option>
<option value="Polonia"></option>
<option value="Eslovenia"></option>
<option value="Escocia"></option>
</datalist>

Cuando haya varias coincidencias se irán mostrando:

Os dejo un ejemplo completo:

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.