Interfaz de búsqueda desplegable (Search-UI)

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 →

Una vez que tu índice de Algolia DocSearch esté listo, configurado y poblado con los datos correctos, necesitarás integrar nuestra interfaz de búsqueda dedicada. Para agregar el menú desplegable de resultados bajo tu campo de búsqueda, deberás incluir nuestra biblioteca DocSearch en tu sitio web como se muestra en el siguiente ejemplo.

<!-- Before the closing </head> -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"
/>

<!-- Before the closing </body> -->
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
  docsearch({
    // Your Search API Key
    apiKey: '<YOUR_API_KEY>',
    // The index populated by the DocSearch scraper
    indexName: '<YOUR_INDEX_NAME>',
    // Your Algolia Application ID
    appId: '<YOUR_APP_ID>',
    // Replace inputSelector with a CSS selector
    // matching your search input
    inputSelector: '<YOUR_CSS_SELECTOR>',
    // Set debug to true to inspect the dropdown
    debug: false,
  });
</script>

Debes integrar este fragmento de código en cada página que implemente la interfaz desplegable.

Pruebas

Si estás ansioso por probar DocSearch pero aún no tienes tus propias credenciales, puedes utilizar las que empleamos en este sitio web:

docsearch({
  appId: 'PMZUYBQDAK',
  apiKey: '24b09689d5b4223813d9b8e48563c8f6',
  indexName: 'docsearch',
});