autocomplete

Una biblioteca de JavaScript que le permite crear rápidamente experiencias de autocompletar

Todo lo que necesitas para empezar es:

• Un contenedor donde inyectar la experiencia
• Datos para rellenar el autocompletar
• Cualquier solución DOM virtual (JavaScript, Preact, React, Vue, etc.)

Los datos que completan los resultados de autocompletar se denominan fuentes. Puedes usar lo que quieras en tus fuentes: un conjunto estático de términos de búsqueda, resultados de búsqueda de una fuente externa como un índice de Algolia, búsquedas recientes y más.

Al configurar solo esos dos parámetros requeridos ( container y getSources ), puede tener una experiencia de autocompletar interactiva. La biblioteca crea una entrada y proporciona los atributos de interactividad y accesibilidad, pero usted tiene el control total de los elementos DOM que se generarán .

Documentación • API • Zona de juegos

Instalación

La forma recomendada de comenzar es con el paquete autocomplete-js . Incluye todo lo que necesitas para ofrecer una experiencia de autocompletar de JavaScript.

De lo contrario, puede instalar el paquete autocomplete-core si desea crear un renderizador desde cero.

Todos los paquetes de Autocompletar están disponibles en el registro npm.

yarn add @algolia/autocomplete-js
# or
npm install @algolia/autocomplete-js

Si no usa un administrador de paquetes, puede usar el elemento script HTML:

 < script src =" https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js " > </ script >
< script >
  const { autocomplete } = window [ '@algolia/autocomplete-js' ] ;
</ script > 

Uso

Para comenzar, necesita un contenedor para su autocompletar. Si aún no tiene uno, puede insertar uno en su marcado:

 < div id = "autocomplete" > < / div >

Luego, inserte su autocompletar llamando a la función autocomplete y proporcionando el container . Puede ser un selector CSS o un elemento.

Asegúrese de proporcionar un contenedor (por ejemplo, un div ), no una input . Autocompletar genera un cuadro de búsqueda totalmente accesible para usted.

 import { autocomplete } from '@algolia/autocomplete-js' ;

autocomplete ( {
  container : '#autocomplete' ,
  // ...
} ) ;

Continúe leyendo nuestra guía de introducción .

Documentación

La documentación ofrece algunas formas de obtener información sobre la biblioteca de Autocompletar:

• Lea los Conceptos básicos para obtener más información sobre los principios subyacentes, como Fuentes y Estado .
• Siga las guías para comprender cómo crear patrones de UX comunes.
• Consulte la referencia de API para obtener una lista completa de parámetros y opciones.
• Pruebe Playground , donde puede realizar una implementación básica y jugar.

Puede encontrar más en la documentación.

Apoyo

• Discusiones de GitHub

Paquetes

Paquete	Descripción	Documentación
autocomplete-js	Paquete JavaScript para autocompletar	Documentación
autocomplete-core	Primitivas centrales de JavaScript para crear una experiencia de autocompletar	Documentación
autocomplete-plugin-recent-searches	Un complemento para agregar búsquedas recientes a Autocompletar	Documentación
autocomplete-plugin-query-suggestions	Un complemento para agregar sugerencias de consultas a Autocompletar	Documentación
autocomplete-plugin-algolia-insights	Un complemento para agregar Algolia Insights a Autocompletar	Documentación
autocomplete-plugin-redirect-url	Un complemento para habilitar URL de redireccionamiento	Documentación
autocomplete-plugin-tags	Un complemento para administrar y mostrar una lista de etiquetas en Autocompletar	Documentación
autocomplete-preset-algolia	Ajustes preestablecidos para usar las funciones de Algolia con Autocompletar	Documentación
autocomplete-theme-classic	Tema clásico para Autocompletar	Documentación

Escaparate

Vea las increíbles experiencias que las personas crearon con Autocompletar:

Búsqueda de documentos	Documentación de Algolia

Encuentre más en nuestro Showcase .

Cajas de arena

Consulte las zonas de pruebas mediante Autocompletar.

Licencia

MIT