Référence API

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 →

info

Le contenu suivant concerne DocSearch v3. Si vous utilisez DocSearch v2, consultez la documentation héritée.

Si vous recherchez DocSearch v4, consultez la documentation ici.

JavaScript

container

type: string | HTMLElement | required

The container for the DocSearch search box. You can either pass a CSS selector or an Element. If there are several containers matching the selector, DocSearch picks up the first one.

environment

type: typeof window | default: window | optional

The environment in which your application is running.

This is useful if you’re using DocSearch in a different context than window.

appId

type: string | requis

Votre identifiant d'application Algolia.

apiKey

type: string | requis

Votre clé API de recherche Algolia.

indexName

type: string | requis

Le nom de votre index Algolia.

placeholder

type: string | default: "Search docs" | optionnel

Texte indicatif dans le champ de recherche de la modale DocSearch.

searchParameters

type: SearchParameters | optionnel

Les paramètres de recherche Algolia.

transformItems

type: function | default: items => items | optionnel

Reçoit les résultats de recherche avant leur affichage. Doit renvoyer un nouveau tableau de même structure. Utile pour transformer, réorganiser ou filtrer les éléments.

JavaScript

docsearch({
  // ...
  transformItems(items) {
    return items.map((item) => ({
      ...item,
      content: item.content.toUpperCase(),
    }));
  },
});

React

<DocSearch
  // ...
  transformItems={(items) => {
    return items.map((item) => ({
      ...item,
      content: item.content.toUpperCase(),
    }));
  }}
/>

hitComponent

type: ({ hit, children }) => JSX.Element | default: Hit | optionnel

Composant d'affichage pour chaque résultat.

Voir l'implémentation par défaut.

transformSearchClient

type: function | default: DocSearchTransformClient => DocSearchTransformClient | optionnel

Utile pour transformer le client de recherche Algolia, par exemple pour débouncer les requêtes.

disableUserPersonalization

type: boolean | default: false | optionnel

Désactive l'enregistrement des recherches récentes et favoris dans le stockage local.

initialQuery

type: string | optionnel

Requête initiale pré-remplie dans le champ de recherche.

navigator

type: Navigator | optionnel

Implémentation de l'API Navigator d'Algolia Autocomplete pour rediriger l'utilisateur lors de l'ouverture d'un lien.

Consultez la documentation de l'API Navigator.

translations

type: Partial<DocSearchTranslations> | default: docSearchTranslations | optionnel

Permet de traduire tous les textes bruts et attributs aria présents dans les composants DocSearch.

docSearchTranslations

const translations: DocSearchTranslations = {
  button: {
    buttonText: 'Search',
    buttonAriaLabel: 'Search',
  },
  modal: {
    searchBox: {
      resetButtonTitle: 'Clear the query',
      resetButtonAriaLabel: 'Clear the query',
      cancelButtonText: 'Cancel',
      cancelButtonAriaLabel: 'Cancel',
      searchInputLabel: 'Search',
    },
    startScreen: {
      recentSearchesTitle: 'Recent',
      noRecentSearchesText: 'No recent searches',
      saveRecentSearchButtonTitle: 'Save this search',
      removeRecentSearchButtonTitle: 'Remove this search from history',
      favoriteSearchesTitle: 'Favorite',
      removeFavoriteSearchButtonTitle: 'Remove this search from favorites',
    },
    errorScreen: {
      titleText: 'Unable to fetch results',
      helpText: 'You might want to check your network connection.',
    },
    footer: {
      selectText: 'Select',
      selectKeyAriaLabel: 'Enter key',
      navigateText: 'Navigate',
      navigateUpKeyAriaLabel: 'Arrow up',
      navigateDownKeyAriaLabel: 'Arrow down',
      closeText: 'Close',
      closeKeyAriaLabel: 'Escape key',
      poweredByText: 'Powered by',
    },
    noResultsScreen: {
      noResultsText: 'No results for',
      suggestedQueryText: 'Try searching for',
      reportMissingResultsText: 'Believe this query should return results?',
      reportMissingResultsLinkText: 'Let us know.',
    },
  },
};

getMissingResultsUrl

type: ({ query: string }) => string | optionnel

Fonction renvoyant l'URL de votre dépôt de documentation.

JavaScript

docsearch({
  // ...
  getMissingResultsUrl({ query }) {
    return `https://github.com/algolia/docsearch/issues/new?title=${query}`;
  },
});

React

<DocSearch
  // ...
  getMissingResultsUrl={({ query }) => {
    return `https://github.com/algolia/docsearch/issues/new?title=${query}`;
  }}
/>

Si fournie, un message informatif avec votre lien s'affichera pour les recherches sans résultats. Le texte par défaut est modifiable via la propriété translations.

resultsFooterComponent

type: ({ state }) => JSX.Element | optionnel

Le composant à afficher sous les résultats de recherche.

Vous avez accès à l'état actuel qui permet de récupérer le nombre de résultats, la requête, etc.

Exemple fonctionnel sans JSX dans ce bac à sable.

JavaScript

docsearch({
  // ...
  resultsFooterComponent({ state }) {
    return {
      // The HTML `tag`
      type: 'a',
      ref: undefined,
      constructor: undefined,
      key: state.query,
      // Its props
      props: {
        href: 'https://docsearch.algolia.com/apply',
        target: '_blank',
        onClick: (event) => {
          console.log(event);
        },
        // Raw text rendered in the HTML element
        children: `${state.context.nbHits} hits found!`,
      },
      __v: null,
    };
  },
});

React

<DocSearch
  // ...
  resultsFooterComponent={({ state }) => {
    return <h1>{state.context.nbHits} hits found</h1>;
  }}
/>

maxResultsPerGroup

type: number | optional

Nombre maximum de résultats à afficher par groupe de recherche. Par défaut : 5.

Exemple fonctionnel sans JSX dans ce bac à sable

JavaScript

docsearch({
  // ...
  maxResultsPerGroup: 7,
});

theme

type: DocSearchTheme | default: "light" | optional

Thème visuel pour DocSearch. Valeurs possibles : light ou dark.

JavaScript

docsearch({
  // ...
  theme: 'light',
});