Biblioteca de componentes React accesibles y sistema de diseño para crear aplicaciones web rápidamente, con modo oscuro y compatibilidad con Next.js RSC.
algolia/autocomplete
Una biblioteca de JavaScript para crear cuadros de búsqueda con autocompletado y sugerencias, usando tus propias fuentes y renderizado del DOM.
- Estrellas
- 5,265
- Forks
- 339
- Issues abiertos
- 37
- Último commit
- hace 15 días
¿Qué es?
Autocomplete es una biblioteca de JavaScript para crear experiencias de búsqueda con autocompletado. Proporcionas un elemento contenedor y una función getSources que devuelve las sugerencias que se mostrarán; la biblioteca crea el campo de entrada y gestiona la interacción con el teclado y los atributos de accesibilidad, mientras tú controlas el marcado de los resultados.
Las fuentes pueden ser de cualquier tipo: una lista estática de términos de búsqueda, resultados de un índice de Algolia, búsquedas recientes o datos de cualquier otra API. El proyecto se divide en un paquete principal para crear renderizadores personalizados y el paquete listo para usar autocomplete-js, además de plugins para búsquedas recientes, sugerencias de consultas, Algolia Insights, URL de redirección y etiquetas.
La biblioteca funciona con cualquier solución de DOM virtual, incluido JavaScript sin frameworks, Preact, React y Vue, y se distribuye a través de npm o de una etiqueta script de CDN.
Funciones clave
- 01Solo necesitas un contenedor y una función getSources para tener un cuadro de búsqueda funcional.
- 02Genera un campo de entrada accesible con navegación por teclado y atributos ARIA.
- 03Te permite renderizar los resultados con tu propio marcado del DOM.
- 04Incluye plugins para búsquedas recientes, sugerencias de consultas y Algolia Insights.
- 05Funciona con JavaScript sin frameworks, Preact, React y Vue.
Casos de uso
- Añadir un cuadro de búsqueda que muestre resultados mientras se escribe en un sitio de documentación o de contenidos.
- Mostrar búsquedas recientes y sugerencias de consultas en la barra de búsqueda de un sitio.
- Crear un combobox o una paleta de comandos personalizados con tu propio renderizado de resultados.
Inicio rápido
- 1
Instala el paquete autocomplete-js con npm
npm install @algolia/autocomplete-js - 2
Añade un div contenedor a tu HTML
- 3
Importa autocomplete y llámalo con el contenedor y la opción getSources
Antes de usarlo
- Para mostrar resultados más allá de la configuración básica, tendrás que crear tus propias fuentes e implementar el renderizado.
Temas
Preguntas frecuentes
- ¿Qué es autocomplete?
- Una biblioteca de JavaScript para crear cuadros de búsqueda con autocompletado y sugerencias, usando tus propias fuentes y renderizado del DOM. Autocomplete es una biblioteca de JavaScript para crear experiencias de búsqueda con autocompletado. Proporcionas un elemento contenedor y una función getSources que devuelve las sugerencias que se mostrarán; la biblioteca crea el campo de entrada y gestiona la interacción con el teclado y los atributos de accesibilidad, mientras tú controlas el marcado de los resultados.
- ¿autocomplete es gratuito? ¿Qué licencia tiene?
- autocomplete es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
- ¿autocomplete sigue mantenido?
- Mantenimiento activo. El último commit de autocomplete fue el 7 oct 2026.
- ¿Para qué puedo usar autocomplete?
- Añadir un cuadro de búsqueda que muestre resultados mientras se escribe en un sitio de documentación o de contenidos. Mostrar búsquedas recientes y sugerencias de consultas en la barra de búsqueda de un sitio. Crear un combobox o una paleta de comandos personalizados con tu propio renderizado de resultados.
- ¿Cómo se instala autocomplete?
- Instala el paquete autocomplete-js con npm: npm install @algolia/autocomplete-js Añade un div contenedor a tu HTML Importa autocomplete y llámalo con el contenedor y la opción getSources
- ¿Dónde consigo autocomplete?
- El código fuente y las instrucciones de instalación están en GitHub: https://github.com/algolia/autocomplete
Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.
Proyectos relacionados
Slider JavaScript gratuito, pensado primero para pantallas táctiles, para sitios web y apps móviles, con transiciones aceleradas por hardware y sin dependencia de jQuery.
Componente multiplataforma de hoja de acciones (bottom sheet) para React Native, compatible con Android, iOS y Web y con una API flexible para contenido personalizado.
Typesense es un motor de búsqueda de código abierto y en memoria, con tolerancia a errores tipográficos, facetas, búsqueda geográfica y vectorial, pensado como una alternativa más sencilla a Algolia y Elasticsearch.
Un shell interactivo de línea de comandos, fácil de usar, para macOS, Linux y otros sistemas tipo Unix, con resaltado de sintaxis y sugerencias automáticas desde el primer momento.
Backend de búsqueda ligero y sin esquema que indexa texto y devuelve identificadores, pensado como una alternativa compacta a Elasticsearch.