algolia/autocomplete

これは何？

主な機能

• 01コンテナとgetSources関数を用意するだけで、動作する検索ボックスを構築できます。
• 02キーボード操作とARIA属性に対応した、アクセシブルな入力欄を生成します。
• 03独自のDOMマークアップで検索結果を描画できます。
• 04最近の検索履歴、クエリ候補、Algolia Insights向けのプラグインを提供します。
• 05素のJavaScript、Preact、React、Vueで動作します。

ユースケース

• ドキュメントサイトやコンテンツサイトに、入力中に検索する検索ボックスを追加する。
• サイト内検索バーに最近の検索履歴やクエリ候補を表示する。
• 独自の検索結果描画に対応した、カスタムコンボボックスやコマンドパレットを構築する。

クイックスタート

1. 1

   npmでautocomplete-jsパッケージをインストールします

   npm install @algolia/autocomplete-js
2. 2

   HTMLにコンテナ用のdivを追加します

3. 3

   autocompleteをインポートし、コンテナとgetSourcesオプションを渡して呼び出します

使う前に知っておきたいこと

• !基本的なセットアップ以上の結果を表示するには、ソースとレンダリングを自分で実装する必要があります。

トピック

よくある質問

autocomplete とは？

独自のデータソースとDOM描画でオートコンプリートやタイプアヘッド検索ボックスを構築できるJavaScriptライブラリ。 Autocompleteは、オートコンプリート検索機能を構築するためのJavaScriptライブラリです。コンテナ要素と、表示する候補を返すgetSources関数を用意すると、ライブラリが入力欄を作成し、キーボード操作とアクセシビリティ属性を処理します。検索結果のマークアップは自由に制御できます。

autocomplete は無料で使えますか？ライセンスは？

autocomplete は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

autocomplete は今もメンテナンスされていますか？

活発にメンテナンス中。autocomplete の最終コミットは 2026年10月7日 です。

autocomplete は何に使えますか？

ドキュメントサイトやコンテンツサイトに、入力中に検索する検索ボックスを追加する。 サイト内検索バーに最近の検索履歴やクエリ候補を表示する。 独自の検索結果描画に対応した、カスタムコンボボックスやコマンドパレットを構築する。

autocomplete のインストール方法は？

npmでautocomplete-jsパッケージをインストールします: npm install @algolia/autocomplete-js HTMLにコンテナ用のdivを追加します autocompleteをインポートし、コンテナとgetSourcesオプションを渡して呼び出します

autocomplete はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/algolia/autocomplete