Repolode
algolia

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. 1

    Instala el paquete autocomplete-js con npm

    npm install @algolia/autocomplete-js
  2. 2

    Añade un div contenedor a tu HTML

  3. 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