下拉菜单搜索界面

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

当您的 Algolia DocSearch 索引准备就绪、配置完成并填充了正确数据后，接下来需要集成我们专用的搜索界面。要在搜索输入框下方添加结果下拉菜单，您必须按照以下示例将 DocSearch 库引入网站。

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

此代码片段需要集成到每个使用下拉界面的页面中。

测试

如果您急于测试 DocSearch 但尚未拥有自己的凭据，可以使用我们在本网站上使用的配置：

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