ドロップダウン Search-UI

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →

Algolia DocSearchのインデックスが準備でき、設定が完了し、適切なデータが入力されたら、専用のSearch-UIを統合する必要があります。検索入力欄の下に結果のドロップダウンを表示するには、以下の例のように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>

このスニペットはドロップダウンUIを実装する全ページに組み込む必要があります。

テスト方法

DocSearchを試してみたいがまだ独自の認証情報をお持ちでない場合、このウェブサイトで使用している設定をお試しいただけます：

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