Si te digo que existe una etiqueta llamada datalist en HTML, ¿sabrías decirme solo con el nombre para qué sirve?
Bien, pues quizás sí, o quizá no.
Pero, y si separamos en dos esa etiqueta: por un lado tenemos «Data» y por otro lado «list», seguramente con esa pista ya podríamos adivinar para qué se utiliza esta etiqueta.
O por lo menos, nos podríamos hacer una idea. Pero si no lo has adivinado ya, no te preocupes porque lo vamos a ver a continuación.
Además, lo veremos con un ejemplo, como siempre.
Por cierto, recuerda que este vídeo forma parte de El diccionario HTML de dropcoding.
Y ahora, vamos a averiguar para qué sirve la etiqueta datalist.
¿Qué es datalist en HTML y para qué sirve?
Lo primero que tenemos que saber es que la etiqueta datalist en HTML se utiliza en combinación con un elemento input y sirve para proporcionar una lista autocompletable de opciones sugeridas.
Muy bien, pero ¿qué significa esto?
Pues significa que estas opciones pueden ser predefinidas, es decir, podemos elegir un ítem de la lista o también ingresar un valor diferente.
Ejemplo de etiqueta datalist
Fijaros en este ejemplo porque es muy visual. Bueno, así a simple vista no lo parece, pero ya verás qué ejemplo más chulo.
Vamos a realizar un pequeño buscador de películas para ejemplificar.
Lo primero que tenemos es un Label con el título de «cartelera» y luego más abajo tenemos el input que es donde vamos a escribir los títulos de las películas para buscarlos.
Y ojo, porque aquí viene lo bueno. Aquí tenemos un datalist justo debajo con el ID de «películas» y tenemos las opciones predefinidas.
<body>
<!-- La etiqueta label -->
<label for="inputPeliculas">Cartelera:</label>
<!-- El campo de entrada -->
<input id="inputPeliculas" list="peliculas" placeholder="Escribe o selecciona una película">
<!-- La lista de opciones con las películas -->
<datalist id="peliculas">
<option value="El señor de los anillos">
<option value="Star Wars">
<option value="Pulp Fiction">
<option value="El padrino">
<option value="Los siete samuráis">
</datalist>
</body>Si te fijas, en cada opción está el nombre de una película dentro del atributo value. Tenemos como primera opción «El señor de los anillos», luego «Star Wars», «Pulp Fiction», «El Padrino» y «Los siete samuráis».
Películas muy recomendadas por cierto.
Si os fijáis, son todas las opciones que hemos puesto dentro de la etiqueta datalist.
No solamente podemos seleccionarlas, sino que además, al escribir «el», aparecen todas las películas que empiezan por la palabra «el» o tienen dentro la palabra «el».
Esto es muy útil y además queda muy bien a nivel visual, a nivel estético.
Y de esta forma, puedes hacer una opción predefinida desplegable que es mucho más fácil para el usuario.
Por cierto, si no has visto todas estas películas, deberías verlas.
Y bueno, si algún día quieres hacer un buscador o cualquier input, siempre puedes utilizar la etiqueta datalist para que sea autocompletable. Como has visto, queda muy bien.
Una de las cosas que me gusta más de esta etiqueta es que te va dando sugerencias conforme vas escribiendo.
Espero que te haya resultado útil y ya sabes que si tienes cualquier duda, cualquier sugerencia, puedes dejarla en los comentarios.
Nos vemos en el próximo post.