Version : Ancienne (v1.x - v2.x)

Interface utilisateur de recherche avec 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 →

Une fois votre index Algolia DocSearch prêt, configuré et rempli avec les bonnes données, vous devrez intégrer notre interface utilisateur de recherche dédiée. Pour ajouter le menu déroulant de résultats sous votre champ de recherche, vous devrez inclure notre bibliothèque DocSearch dans votre site web comme dans l'exemple suivant.

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

Vous devez intégrer cet extrait de code sur chaque page utilisant l'interface à menu déroulant.

Test

Si vous souhaitez tester DocSearch mais ne disposez pas encore de vos propres identifiants, vous pouvez utiliser ceux que nous utilisons sur ce site :

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

Test​

Test