La Etiqueta DATALIST

La etiqueta <datalist> permite crear listas de sugerencias para campos de entrada (<input>), ofreciendo opciones predefinidas mientras el usuario escribe. Es ideal para mejorar la usabilidad en formularios con autocompletado.

Sintaxis básica

<input list="lista-opciones">
<datalist id="lista-opciones">
  <option value="Opción 1">
  <option value="Opción 2">
</datalist>

• list (en <input>) → Vincula el campo con el <datalist> mediante el id.

• <option> → Define las sugerencias disponibles.

Casos de uso comunes

Búsqueda con sugerencias

<label>Buscar ciudad: 
  <input type="text" list="ciudades">
</label>
<datalist id="ciudades">
  <option value="Madrid">
  <option value="Barcelona">
  <option value="Valencia">
</datalist>

Selección de valores numéricos

<label>Edad: 
  <input type="number" list="edades" min="18" max="99">
</label>
<datalist id="edades">
  <option value="18">
  <option value="25">
  <option value="30">
</datalist>

Formulario de registro con emails comunes

<label>Correo electrónico: 
  <input type="email" list="dominios">
</label>
<datalist id="dominios">
  <option value="@gmail.com">
  <option value="@hotmail.com">
  <option value="@yahoo.com">
</datalist>

Atributos clave

Elemento	Atributo	Descripción
<input>	list	Vincula con el id del <datalist>
<option>	value	Valor de la sugerencia
<option>	label	Texto alternativo (depende del navegador)

Ejemplo avanzado: Sugerencias con imágenes (usando CSS y JS)

<input type="text" list="autos" placeholder="Marca de auto">
<datalist id="autos">
  <option value="Toyota" data-imagen="toyota.jpg">
  <option value="Ford" data-imagen="ford.jpg">
</datalist>

<script>
  document.querySelector('input').addEventListener('input', function(e) {
    const valor = e.target.value;
    const opcion = document.querySelector(`option[value="${valor}"]`);
    if (opcion) {
      console.log('Imagen asociada:', opcion.dataset.imagen);
    }
  });
</script>

Accesibilidad

Lectores de pantalla: Detectan las opciones del <datalist>.

• Usar <label> asociado al input.

• Añadir instrucciones claras:

<p>Comience a escribir para ver sugerencias</p>

Errores comunes

No vincular correctamente el id y list

<!-- Incorrecto -->
<input list="lista-fallida"> <!-- ID no existe -->
<datalist id="lista-correcta">...</datalist>

Usar donde se necesita selección obligatoria

<!-- Incorrecto: Para elegir entre opciones fijas, usa <select> -->
<datalist id="paises">
  <option value="España">
</datalist>
<input list="paises">

<!-- Correcto -->
<select>
  <option>España</option>
</select>

Buenas prácticas

• Ordenar opciones: Mostrar sugerencias alfabéticamente.

• Usar con <input type="search">: Para campos de búsqueda predictiva.

• Cargar opciones dinámicamente (ej: con JavaScript):

fetch('/api/ciudades')
  .then(res => res.json())
  .then(ciudades => {
    const datalist = document.getElementById('ciudades');
    datalist.innerHTML = ciudades.map(ciudad => 
      `<option value="${ciudad.nombre}">`
    ).join('');
  });

Compatibilidad

Navegador	Soporte
Chrome	Sí (v20+)
Firefox	Sí (v4+)
Safari	Sí (v12.1+)
Edge	Sí (v12+)

Conclusión:

La etiqueta <datalist> es perfecta para:

• Mejorar la experiencia del usuario con autocompletado inteligente.
• Reducir errores en formularios.
• Ofrecer sugerencias sin limitar la entrada libre.

¡Úsala para crear formularios más intuitivos y eficientes!