Autocompletado desde cero con Vanilla JS

Siempre he descubierto que una de las mejores formas de comprender a fondo un concepto es construirlo desde cero. Por eso escribí esta guía. Quería desmenuzar el autocompletado, un componente que usamos a diario, en sus piezas fundamentales. Mi objetivo es que, al crearlo juntos, no solo obtengas una herramienta potente para tus proyectos, sino también una apreciación más profunda por los detalles que crean una gran experiencia de usuario. Vamos allá

El autocompletado se ha convertido en una expectativa del usuario. Hace las interfaces más rápidas, inteligentes y amigables. Aunque parezca complejo, crear un componente de autocompletado de nivel profesional desde cero es una magnífica forma de afinar tus habilidades con JavaScript puro.

En este tutorial construimos un autocompletado completo, accesible y de alto rendimiento. Cubriremos cómo obtener datos desde una API en vivo como jsonplaceholder typicode com, filtrar resultados y renderizar dinámicamente la lista de sugerencias, implementar navegación por teclado con Flecha arriba, Flecha abajo, Enter y Escape, añadir debouncing para evitar llamadas excesivas, asegurar la accesibilidad con atributos ARIA y aplicar estilos con Tailwind CSS.

Resultado final: un autocompletado limpio, rápido y accesible para buscar usuarios. Puedes ver una demostración en Ejemplo de Autocompletado.

Estructura base: partimos de un campo de texto al que añadimos semántica y ARIA. El control se declara como role combobox, con aria-autocomplete list, aria-haspopup true, aria-expanded para reflejar si el panel de sugerencias está abierto y aria-controls para vincular el campo con la lista de sugerencias role listbox. Estos atributos informan a los lectores de pantalla sobre el comportamiento del componente.

Lógica en JavaScript: el núcleo del componente gestiona desde la obtención de datos hasta la interacción del usuario. Primero, recuperamos usuarios de JSONPlaceholder. Para no saturar la red ni nuestro hilo principal al teclear, envolvemos el manejador de entrada en una función de debouncing que retrasa el procesamiento unos 300 ms después de que la persona deje de escribir. Con esto evitamos solicitudes innecesarias y mantenemos la interfaz fluida.

Renderizado de sugerencias: al tener resultados filtrados, generamos dinámicamente cada elemento de la lista con un identificador estable y role option. Actualizamos aria-expanded a true cuando hay sugerencias visibles y a false cuando se limpian. Si no hay coincidencias, mostramos un mensaje amigable que no sea seleccionable y mantenemos una altura máxima con desplazamiento para listas largas, lo que mejora la usabilidad.

Navegación por teclado y accesibilidad: un autocompletado profesional ha de ser plenamente operable con teclado. Escuchamos Flecha abajo y Flecha arriba para mover el foco visual por la lista, Enter para confirmar y Escape para cerrar. Cada vez que cambia el ítem activo, actualizamos aria-activedescendant en el campo de texto con el id de la opción resaltada. Así, el lector de pantalla sabe exactamente qué opción está actualmente enfocada, ofreciendo una experiencia inclusiva y consistente.

Detalles de calidad: aseguramos que las sugerencias sean clicables con ratón y táctil, sincronizamos el valor del campo al seleccionar una opción y cerramos la lista cuando el usuario hace clic fuera. También gestionamos estados vacíos, errores de red y bloqueamos la navegación si la lista está cerrada. Para estilos, Tailwind CSS permite prototipar rápido, pero cualquier sistema de diseño o CSS modular encaja sin cambios en la lógica.

Aplicando estos principios en el mundo real: lo construido aquí es una base general que puedes adaptar a búsquedas de productos, selección de etiquetas, catálogos internos o directorios de usuarios. Como ejemplo especializado, la librería places autocomplete js envuelve Google Maps Places New API y resuelve piezas específicas como gestión de tokens de sesión, tipos de lugares y datos estructurados. Los mismos fundamentos de debouncing, navegación por teclado y ARIA se aplican tal cual.

Cómo puede ayudarte Q2BSTUDIO: en nuestra empresa diseñamos y desarrollamos aplicaciones a medida y software a medida con foco en rendimiento, accesibilidad y seguridad. Si necesitas integrar componentes como este en tu producto, o construir plataformas completas listas para escalar, descubre nuestro enfoque en desarrollo de aplicaciones y software multiplataforma. También te acompañamos con inteligencia artificial e ia para empresas, agentes IA, ciberseguridad y pentesting, servicios cloud aws y azure, servicios inteligencia de negocio y analítica con power bi para que tu solución sea robusta, escalable y lista para el crecimiento.

Consejos prácticos adicionales: limita la cantidad de resultados para mantener la lista ágil, resalta las coincidencias del término de búsqueda para mejorar el reconocimiento visual, usa un índice controlado para gestionar el ítem activo, asegura que la lista se posicione correctamente en pantallas pequeñas y prueba con lector de pantalla para validar aria-activedescendant, rol de combobox y listbox, y el estado de aria-expanded.

Te leo: ¿cómo lo habrías planteado tú Has enfrentado retos de rendimiento o accesibilidad al implementar autocompletados Si tienes preguntas, compártelas y las abordamos. Me encantará saber cómo aplicarías estas técnicas a tus proyectos, desde catálogos internos hasta integraciones con motores de búsqueda corporativos.

Conclusión: construir un autocompletado rico en funcionalidades desde cero es una excelente vía para dominar JavaScript y sentar bases sólidas para componentes interactivos y centrados en el usuario. Con debouncing, renderizado eficiente, soporte de teclado y atributos ARIA bien definidos, tendrás una pieza lista para producción que puedes extender a múltiples casos de uso.