autocomplete
v1.17.7
Une bibliothèque JavaScript qui vous permet de créer rapidement des expériences de saisie semi-automatique
Tout ce dont vous avez besoin pour commencer est :
Les données qui alimentent les résultats de saisie semi-automatique sont appelées sources. Vous pouvez utiliser ce que vous voulez dans vos sources : un ensemble statique de termes de recherche, des résultats de recherche provenant d'une source externe comme un index Algolia, des recherches récentes, etc.
En configurant uniquement ces deux paramètres requis ( container et getSources ), vous pouvez vivre une expérience de saisie semi-automatique interactive. La bibliothèque crée une entrée et fournit les attributs d'interactivité et d'accessibilité, mais vous contrôlez totalement les éléments DOM à générer .
Documentation • API • Terrain de jeu
La méthode recommandée pour commencer consiste à utiliser le package autocomplete-js . Il comprend tout ce dont vous avez besoin pour offrir une expérience de saisie semi-automatique JavaScript.
Sinon, vous pouvez installer le package autocomplete-core si vous souhaitez créer un moteur de rendu à partir de zéro.
Tous les packages Autocomplete sont disponibles sur le registre npm.
yarn add @algolia/autocomplete-js
# or
npm install @algolia/autocomplete-js Si vous n'utilisez pas de gestionnaire de packages, vous pouvez utiliser l'élément script HTML :
< script src =" https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js " > </ script >
< script >
const { autocomplete } = window [ '@algolia/autocomplete-js' ] ;
</ script > Pour commencer, vous avez besoin d'un conteneur dans lequel votre saisie semi-automatique peut entrer. Si vous n'en avez pas déjà un, vous pouvez en insérer un dans votre balisage :
< div id = "autocomplete" > < / div > Ensuite, insérez-y votre saisie semi-automatique en appelant la fonction autocomplete et en fournissant le container . Il peut s'agir d'un sélecteur CSS ou d'un Element.
Assurez-vous de fournir un conteneur (par exemple, un div ), pas un input . La saisie semi-automatique génère pour vous un champ de recherche entièrement accessible.
import { autocomplete } from '@algolia/autocomplete-js' ;
autocomplete ( {
container : '#autocomplete' ,
// ...
} ) ;Continuez à lire notre guide de démarrage .
La documentation propose plusieurs façons d'en savoir plus sur la bibliothèque de saisie semi-automatique :
Vous pouvez en trouver plus sur la documentation.
| Emballer | Description | Documentation |
|---|---|---|
autocomplete-js | Package JavaScript pour la saisie semi-automatique | Documentation |
autocomplete-core | Primitives de base JavaScript pour créer une expérience de saisie semi-automatique | Documentation |
autocomplete-plugin-recent-searches | Un plugin pour ajouter les recherches récentes à la saisie semi-automatique | Documentation |
autocomplete-plugin-query-suggestions | Un plugin pour ajouter des suggestions de requêtes à la saisie semi-automatique | Documentation |
autocomplete-plugin-algolia-insights | Un plugin pour ajouter Algolia Insights à la saisie semi-automatique | Documentation |
autocomplete-plugin-redirect-url | Un plugin pour activer les URL de redirection | Documentation |
autocomplete-plugin-tags | Un plugin pour gérer et afficher une liste de balises en Autocomplete | Documentation |
autocomplete-preset-algolia | Préréglages pour utiliser les fonctionnalités d'Algolia avec la saisie semi-automatique | Documentation |
autocomplete-theme-classic | Thème classique pour la saisie semi-automatique | Documentation |
Découvrez les expériences géniales que les gens ont créées avec la saisie semi-automatique :
 |  |
|---|---|
DocSearch | Documentation Algolia |
Trouvez-en plus dans notre vitrine .
Découvrez les bacs à sable à l’aide de la saisie semi-automatique.
MIT
