Probablemente hayas experimentado este tipo de respuesta en algún lugar de la web: cuando estás escribiendo en un formulario de entrada, aparece una lista de sugerencias en la parte inferior del campo de entrada.
A lo largo de los años, hemos confiado en JavaScript para crear tal función. Hoy en día, podemos lograrlo con el nuevo elemento HTML5 <datalist>. Este nuevo elemento HTML5 nos permite almacenar una lista de opciones que se mostrarán a medida que los usuarios escriban en el campo de entrada.
Atributo List HTML5
El elemento <datalist> puede vincularse al elemento <input> mediante un nuevo atributo HTML5, list. Podemos usar el atributo list en algunos tipos de entrada como texto y búsqueda. Sin embargo, según la Mozilla Developer Network, el atributo list no es aplicable en los siguientes tipos de entrada: hidden, checkbox, radio, file y button.
En el siguiente ejemplo, agregamos una lista de ciudades con <datalist> y la asignamos con el atributo ID, de la siguiente manera.
<datalist id="ciudad">
<option value="Adelaida">
<option value="Bandung">
<option value="Bangkok">
<option value="Pekín">
<option value="Hanoi">
<option value="Ciudad Ho Chi Minh">
<option value="Hong Kong">
<option value="Yakarta">
<option value="Kuala Lumpur">
<option value="Osaka">
<option value="Seúl">
<option value="Shanghái">
<option value="Singapur">
<option value="Surabaya">
<option value="Sídney">
<option value="Tokio">
</datalist>Para conectar el elemento <datalist> a un elemento <input>, simplemente agrega el atributo list y hace referencia al atributo id, de la siguiente manera.
<input class="destination-list" type="text" placeholder="Desde:" list="ciudad">
<input class="destination-list" type="text" placeholder="Hacia:" list="ciudad">Comportamiento del Navegador
Cada navegador que admite el elemento <datalist>, como Chrome, Opera y Firefox, tiene un comportamiento ligeramente diferente.
En Chrome, se mostrarán las opciones que comienzan con el valor que escribimos. En el ejemplo a continuación, Chrome muestra los valores que comienzan con “s“.
Por otra parte, si hacemos clic en la entrada, se mostrarán todas las opciones disponibles, como se muestra a continuación.
Código de Ejemplo
Código HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Elemento HTML5 Datalist</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="demo-wrapper">
<div class="destination-form">
<h3 class="destination-title">Selecciona tu destino</h3>
<div class="destination-city">
<input class="destination-list" type="text" placeholder="Desde:" list="ciudad">
<input class="destination-list" type="text" placeholder="Hacia:" list="ciudad">
<datalist id="ciudad">
<option value="Adelaida">
<option value="Bandung">
<option value="Bangkok">
<option value="Pekín">
<option value="Hanoi">
<option value="Ciudad Ho Chi Minh">
<option value="Hong Kong">
<option value="Yakarta">
<option value="Kuala Lumpur">
<option value="Osaka">
<option value="Seúl">
<option value="Shanghái">
<option value="Singapur">
<option value="Surabaya">
<option value="Sídney">
<option value="Tokio">
</datalist>
<button type="submit">Enviar</button>
</div>
</div>
</div>
</body>
</html>Código CSS:
body {
background-color: #f9f9f9;
}
.demo-wrapper {
width: 550px;
margin: 50px auto 0;
}
.destination-form {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .2);
}
.destination-city {
padding: 30px 15px;
border-radius: 0px 0px 3px 3px;
background-color: #fff;
}
.destination-title {
margin: 0;
color: #fff;
font-size: 1em;
padding: 0 15px;
height: 35px;
line-height: 38px;
background: #e54b22;
background: -moz-linear-gradient(top, #e54b22 0%, #e54b22 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e54b22), color-stop(100%,#394160));
background: -webkit-linear-gradient(top, #e54b22 0%,#e54b22 100%);
background: -o-linear-gradient(top, #e54b22 0%,#e54b22 100%);
background: -ms-linear-gradient(top, #e54b22 0%,#e54b22 100%);
background: linear-gradient(to bottom, #e54b22 0%,#e54b22 100%);
font-weight: normal;
border-radius: 3px 3px 0px 0px;
}
.destination-city input[type=text] {
border: 1px solid #ccc;
border-radius: 2px;
box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, .2);
background-color: #fff;
padding: 0 5px;
height: 30px;
font-size: 0.8em;
width: 200px;
line-height: 30px;
float: left;
margin-right: 4px;
}
.destination-city button {
background: #e54b22;
background: -moz-linear-gradient(top, #e54b22 0%, #258dc8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e54b22), color-stop(100%,#258dc8));
background: -webkit-linear-gradient(top, #e54b22 0%,#258dc8 100%);
background: -o-linear-gradient(top, #e54b22 0%,#258dc8 100%);
background: -ms-linear-gradient(top, #e54b22 0%,#258dc8 100%);
background: linear-gradient(to bottom, #e54b22 0%,#258dc8 100%);
border: 1px solid #333;
font-size: .8em;
height: 30px;
border-radius: 2px;
background-color: #e54b22;
font-weight: bold;
border: 1px solid #4780b2;
color: #fff;
padding: 0px 20px;
}
.destination-city ul.datalist {
margin: 0;
padding: 0 !important;
}
.destination-city > div[style] {
float: left;
}
.destination-city .datalist li {
font-size: 1em;
margin: 0;
padding: 2px;
}
.destination-city .datalist li:hover {
cursor: pointer;
background-color: grey;
color: #fff;
}Resultado:
Palabras Finales
En resumen, el atributo datalist en HTML es una herramienta útil para mejorar la experiencia del usuario al proporcionar sugerencias y opciones predefinidas mientras completan formularios en línea. Debe utilizarse cuando se desee simplificar la entrada de datos al ofrecer a los usuarios una lista de opciones fácilmente seleccionables. Esto mejora la precisión de los datos ingresados y agiliza el proceso de llenado de formularios, lo que resulta en una mayor satisfacción del usuario y una reducción de errores.
