ドロップダウンの挙動

非公式ベータ版翻訳

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

注意

以下の Autocomplete.js への参照は古い情報です。最新版をお試しになりたい場合は、Autocomplete ドキュメント をご覧ください。

当社のJavaScriptライブラリ DocSearch.js は Algolia autocomplete.js ライブラリのラッパーです。このライブラリは検索入力欄でタイプされるすべてのキーストロークを監視し、Algoliaにクエリを送信し、結果をドロップダウンに表示します。DocSearchで動作するようすべてが事前設定済みです。UIライブラリではさらにカスタマイズ可能な設定オプションも提供しています。Algoliaがドキュメント検索で即座に利用できることを体感してください。タイピングしながら学ぶ 体験を始めましょう。

appId

appId キーを使用して独自のアプリケーションIDを定義します。

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

handleSelected

このメソッドは、候補が選択されたとき（クリックまたはキー操作による）に呼び出されます。デフォルトでは、DocSearchは結果ページへのアンカーリンクを表示します。結果（ヒットとも呼ばれる）をオーバーライドして独自の挙動を追加できます。なお、CMD/CTRL + Click 操作ですでに新しいタブで開く機能は利用可能です。

このメソッドは以下の引数とともに呼び出されます：

• input: 検索 input 要素への参照。.open(), .close(), .getVal(), .setVal() メソッドを備えています。

• event: 選択をトリガーした実際のイベント。

• suggestion: 現在の選択を表すオブジェクト。移動先を示す .url キーを含みます。

• datasetNumber: DocSearchは一度に1つのデータセットのみを検索するため、常に 1 となります。この属性は無視して構いません。

• context: 選択に関する追加情報。.selectionMethod キーを含み、候補がどのように選択されたかに応じて click, enterKey, tabKey, blur のいずれかの値を持ちます。

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

CodeSandboxで実際に試すことができます。

queryHook

このメソッドは、Algoliaにクエリを送信する前に、入力されたキーワードを変換するために各キーストロークで呼び出されます。デフォルトでは何も行いませんが、必要に応じて独自のロジックを追加できるようフックを提供しています。

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

transformData

このメソッドは、各ヒットを表示する前に呼び出されます。デフォルトでは何も行いませんが、Algoliaから返されたヒットを前処理するための独自ロジックを追加できるようフックを提供しています。

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

autocompleteOptions

autocompleteOptions パラメータを使用して、基盤となる Autocomplete.js ライブラリに任意のオプションを渡せます。利用可能なすべての値の一覧は 公式ドキュメント で確認できます。

docsearch インスタンスの .autocomplete プロパティを通じて autocomplete イベントを監視することも可能です。

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

algoliaOptions キーを使用して検索パラメータをAlgolia APIに転送できます。すべてのAlgolia APIオプションは 専用ドキュメント で確認できます。

例えば、ドロップダウンに表示する結果数を増やしたい場合があります。hitsPerPage は表示するヒット数を設定します。

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