Datalist para autocompletado
Sugiera valores de entrada con el elemento datalist
Datalist para autocompletado es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué es datalist?
El elemento <datalist> proporciona una lista de sugerencias predefinidas para un <input>:
<label for="browser">Favorite browser</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
<!-- list attribute links input to datalist by id -->
<!-- User can type freely OR select a suggestion -->datalist frente a select
Diferencia principal entre <datalist> y <select>:
- datalist; texto libre + sugerencias (el usuario puede escribir cualquier cosa)
- select; elección restringida (el usuario debe elegir de la lista)
Use datalist cuando quiera sugerir valores, pero no restringir la entrada.
Vincular datalist a input
El atributo list de <input> debe coincidir con el id de <datalist>:
<input type="text" list="fruits" name="fruit">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Cherry">
</datalist>datalist con distintos tipos de input
<datalist> funciona con muchos tipos de input:
<!-- text + datalist: type-ahead suggestions -->
<input type="text" list="countries">
<!-- range + datalist: tick marks -->
<input type="range" min="0" max="100" step="10" list="marks">
<datalist id="marks">
<option value="0"> <option value="25">
<option value="50"> <option value="75"> <option value="100">
</datalist>
<!-- color + datalist: color palette shortcuts -->
<input type="color" list="brand-colors">
<datalist id="brand-colors">
<option value="#0070f3">
<option value="#e86f00">
</datalist>label de option en datalist
Las opciones de datalist pueden tener una etiqueta visible y un valor enviado:
<datalist id="countries">
<option value="US">United States</option>
<option value="GB">United Kingdom</option>
<option value="DE">Germany</option>
</datalist>
<!-- In some browsers, label shows in dropdown
value is submitted when the option is selected -->Filtrar sugerencias
El navegador filtra las sugerencias a medida que el usuario escribe:
- El algoritmo de coincidencia varía según el navegador
- Algunos buscan desde el principio; otros, en cualquier parte de la cadena
- No puede controlar el comportamiento de filtrado del navegador
- Para aplicar un filtrado personalizado, cree un componente de autocompletado personalizado con ARIA
datalist dinámico con JavaScript
Actualice las opciones de datalist de forma dinámica:
<input type="text" list="suggestions" id="search-input">
<datalist id="suggestions"></datalist>
<script>
document.getElementById('search-input').addEventListener('input', async function() {
const query = this.value;
const res = await fetch(`/api/search?q=${query}`);
const items = await res.json();
const dl = document.getElementById('suggestions');
dl.innerHTML = items.map(item =>
`<option value="${item.name}">`
).join('');
});
</script>Accesibilidad de datalist
Consideraciones de accesibilidad para datalist:
- Los lectores de pantalla anuncian las sugerencias como un listbox
- Los usuarios pueden desplazarse por las sugerencias con las teclas de dirección
- El input sigue aceptando texto libre; asegúrese de que la validación gestione este caso
Notas sobre la compatibilidad de los navegadores
La compatibilidad de los navegadores con datalist es buena, pero presenta algunas particularidades:
- Chrome, Edge y Firefox: compatibilidad completa
- Safari: compatible a partir de Safari 12.1+
- Navegadores móviles: la mayoría muestra sugerencias, pero la interfaz varía
- Pruebe siempre en los navegadores de destino antes de depender de datalist
Cuándo no usar datalist
Datalist no es ideal cuando:
- Necesita una validación estricta (el usuario debe elegir de la lista)
- Necesita estilos personalizados para las opciones (el navegador controla toda la apariencia)
- Necesita agrupar opciones (optgroup no es compatible con datalist)
En esos casos, use un componente de autocompletado personalizado con ARIA role="combobox".
datalist frente a input de búsqueda
Compare datalist con un input de búsqueda con autocompletado:
<input type="search" name="q" list="search-suggestions">
<datalist id="search-suggestions">
<option value="HTML tutorial">
<option value="HTML forms">
<option value="HTML accessibility">
</datalist>
<!-- type="search" provides search-specific UI on mobile -->
<!-- list attribute adds datalist suggestions to any input type -->Comprobación rápida
¿Cómo se vincula un input a su elemento datalist?
Resumen: datalist
Aspectos esenciales de datalist:
<datalist id>+<input list>; se vinculan mediante la coincidencia entre id y list- El usuario puede escribir libremente o elegir una sugerencia
- Use
<select>cuando la elección deba estar restringida - Funciona con text, range, color y otros tipos de input
- Las sugerencias se filtran a medida que el usuario escribe
Preguntas frecuentes
¿La lección «Datalist para autocompletado» es gratis?
Sí — el texto completo de «Datalist para autocompletado» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Datalist para autocompletado»?
Sugiera valores de entrada con el elemento datalist Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Datalist para autocompletado»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Menús desplegables: select y option
- Textarea para entrada multilínea
- Grupos de casillas y botones de opción
- Datalist para autocompletado