Saltar al contenido principal
Versión: Legado (v3.x)

Referencia de la API

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

información

El siguiente contenido es para DocSearch v3. Si usas DocSearch v2, consulta la documentación legacy.

Si buscas DocSearch v4, consulta la documentación aquí.

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 | requerido

Tu ID de aplicación de Algolia.

apiKey​

type: string | requerido

Tu clave de la API de búsqueda de Algolia.

indexName​

type: string | requerido

Nombre de tu índice de Algolia.

placeholder​

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

El placeholder del campo de búsqueda en el modal emergente de DocSearch.

searchParameters​

type: SearchParameters | opcional

Los Parámetros de búsqueda de Algolia.

transformItems​

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

Recibe los resultados de búsqueda antes de mostrarlos. Debe devolver un nuevo array con la misma estructura. Útil para transformar, eliminar o reordenar elementos.

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

hitComponent​

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

Componente para mostrar cada elemento.

Consulta la implementación por defecto.

transformSearchClient​

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

Útil para transformar el Cliente de búsqueda de Algolia, por ejemplo para debouncear consultas de búsqueda

disableUserPersonalization​

type: boolean | default: false | optional

Desactiva el guardado de búsquedas recientes y favoritos en el almacenamiento local.

initialQuery​

type: string | optional

Consulta inicial del campo de búsqueda.

type: Navigator | optional

Implementación de la API Navigator de Algolia Autocomplete para redirigir al usuario al abrir un enlace.

Más información en la documentación de la API Navigator.

translations​

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

Permite traducir cualquier texto y etiquetas aria-labels presentes en el botón o componentes modales de 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 | optional

Función que devuelve la URL de tu repositorio de documentación.

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

Cuando se proporciona, se mostrará un mensaje informativo con tu enlace en búsquedas sin resultados. El texto predeterminado puede cambiarse mediante la propiedad translations.

No results screen with informative message

resultsFooterComponent​

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

Componente para mostrar debajo de los resultados de búsqueda.

Tienes acceso al estado actual que te permite obtener el número de resultados devueltos, la consulta, etc.

Puedes encontrar un ejemplo funcional sin JSX en este sandbox.

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,
    };
  },
});

maxResultsPerGroup​

type: number | opcional

Número máximo de resultados a mostrar por grupo de búsqueda. Por defecto es 5.

Puedes encontrar un ejemplo funcional sin JSX en este sandbox

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

theme​

type: DocSearchTheme | default: "light" | opcional

Tema para DocSearch. Puede ser light (claro) o dark (oscuro).

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