Comportamiento del Desplegable

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 →

precaución

Las siguientes referencias a Autocomplete.js están desactualizadas. Si deseas probar la versión más reciente, visita la documentación de Autocomplete

Nuestra biblioteca JavaScript DocSearch.js es un wrapper de la biblioteca Algolia autocomplete.js. Esta biblioteca escucha cada pulsación de tecla en el campo de búsqueda, consulta Algolia y muestra los resultados en un desplegable. Todo está preconfigurado para funcionar con DocSearch. Nuestra biblioteca UI también expone opciones de configuración que puedes usar para personalizar aún más. Descubrirás Algolia listo para usar en documentación. Comencemos con la experiencia de aprender mientras escribes.

appId

Define tu propio ID de aplicación usando la clave appId.

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

handleSelected

Este método se llama cuando se selecciona una sugerencia (ya sea con clic o teclado). Por defecto, DocSearch muestra enlaces a la página de resultados. Puedes sobrescribir los resultados (llamados hits) para añadir tu propio comportamiento. Ten en cuenta que ya puedes abrir una nueva pestaña mediante CMD/CTRL + Click.

El método se llama con los siguientes argumentos:

• input: referencia al elemento input de búsqueda. Incluye los métodos .open(), .close(), .getVal() y .setVal().

• event: el evento real que desencadena la selección.

• suggestion: objeto que representa la selección actual. Contiene una clave .url que indica el destino.

• datasetNumber: siempre debe ser igual a 1 ya que DocSearch busca en un solo dataset a la vez. Puedes ignorar este atributo.

• context: información adicional sobre la selección. Contiene una clave .selectionMethod que puede ser click, enterKey, tabKey o blur, dependiendo de cómo se seleccionó la sugerencia.

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

Puedes probarlo en vivo en CodeSandbox.

queryHook

Este método se llama en cada pulsación para transformar las palabras clave antes de consultar Algolia. Por defecto no hace nada, pero proporcionamos este hook para que añadas tu propia lógica si es necesario.

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

transformData

Este método se llamará en cada hit antes de mostrarlo. Por defecto no hace nada, pero proporcionamos este hook para que añadas tu propia lógica y preproceses los hits devueltos por Algolia.

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

autocompleteOptions

Puedes pasar cualquier opción a la biblioteca subyacente Autocomplete.js usando el parámetro autocompleteOptions. Encuentras todas las opciones disponibles en la documentación oficial.

También puedes escuchar eventos de autocomplete mediante la propiedad .autocomplete de la instancia 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

Puedes enviar parámetros de búsqueda a la API de Algolia usando la clave algoliaOptions. Encuentras todas las opciones en su documentación específica.

Por ejemplo, quizás quieras aumentar el número de resultados mostrados en el desplegable. hitsPerPage establece la cantidad de hits visibles.

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