Comportement du menu déroulant

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

prudence

Les références suivantes à Autocomplete.js sont obsolètes. Pour découvrir la dernière version, consultez la documentation Autocomplete.

Notre bibliothèque JavaScript DocSearch.js est un wrapper de la bibliothèque Algolia autocomplete.js. Cette bibliothèque écoute chaque frappe dans le champ de recherche, interroge Algolia et affiche les résultats dans un menu déroulant. Tout est préconfiguré pour fonctionner avec DocSearch. Notre bibliothèque d'interface expose également des options de configuration pour aller plus loin. Vous découvrirez Algolia prêt à l'emploi pour la documentation. Commençons l'expérience d'apprentissage au fil de la saisie.

appId

Définit votre identifiant d'application via la clé appId.

docsearch({
  appId: '<YOUR_APP_ID>',
  […],
});

handleSelected

Cette méthode est appelée lorsqu'une suggestion est sélectionnée (par clic ou frappe). Par défaut, DocSearch affiche des liens d'ancrage vers la page de résultats. Vous pouvez personnaliser le traitement des résultats (appelés hits) pour ajouter votre propre comportement. Notez que vous pouvez déjà ouvrir un nouvel onglet via l'action CMD/CTRL + Click.

La méthode est appelée avec les arguments suivants :

• input : référence à l'élément input de recherche. Dispose des méthodes .open(), .close(), .getVal() et .setVal().

• event : l'événement déclenchant la sélection.

• suggestion : objet représentant la sélection courante. Contient une clé .url indiquant la destination.

• datasetNumber : vaut toujours 1 car DocSearch ne recherche qu'un jeu de données à la fois. Peut être ignoré.

• context : informations supplémentaires sur la sélection. Contient une clé .selectionMethod pouvant être click, enterKey, tabKey ou blur, selon le mode de sélection.

docsearch({
  // ...
  handleSelected: function (input, event, suggestion, datasetNumber, context) {
    // Prevents the default behavior on click and rather opens the suggestion
    // in a new tab.
    if (context.selectionMethod === 'click') {
      input.setVal('');

      const windowReference = window.open(suggestion.url, '_blank');
      windowReference.focus();
    }
  },
});

Vous pouvez l'essayer en direct sur CodeSandbox.

queryHook

Méthode appelée à chaque frappe pour transformer les mots-clés avant l'envoi à Algolia. Par défaut inactive, ce hook vous permet d'ajouter votre propre logique.

docsearch({
  […],
  queryHook: function(query) {
    // Transform query, and then return the updated version
  }
});

transformData

Méthode appelée sur chaque hit avant son affichage. Inactive par défaut, ce hook vous permet de prétraiter les hits retournés par Algolia.

docsearch({
  […],
  transformData: function(hits) {
    // Transform the list of hits
  }
});

autocompleteOptions

Transmettez des options à la bibliothèque sous-jacente Autocomplete.js via le paramètre autocompleteOptions. La liste complète des valeurs disponibles se trouve dans la documentation officielle.

Vous pouvez également écouter les événements autocomplete via la propriété .autocomplete de l'instance docsearch.

const search = docsearch({
  […],
  autocompleteOptions: {
    // See https://github.com/algolia/autocomplete/tree/master#global-options
  }
});

// See https://github.com/algolia/autocomplete/tree/master#custom-events
search.autocomplete.on('autocomplete:opened', event => {
});

algoliaOptions

Transmettez des paramètres de recherche à l'API Algolia via la clé algoliaOptions. Toutes les options de l'API Algolia sont documentées dans leur propre documentation.

Par exemple, pour augmenter le nombre de résultats affichés dans le menu déroulant. hitsPerPage définit le nombre de hits affichés.

docsearch({
  algoliaOptions: {
    hitsPerPage: 10,
    // See https://www.algolia.com/doc/api-reference/api-parameters/
  },
});