autocompleteダウンロード - autocompleteソースコードのダウンロード

autocomplete

その他のソースコード

v1.17.7

ダウンロード

オートコンプリートエクスペリエンスを迅速に構築できる JavaScript ライブラリ

始めるために必要なのは次のとおりです。

エクスペリエンスを注入するコンテナ
オートコンプリートに入力するデータ
任意の仮想 DOM ソリューション (JavaScript、Preact、React、Vue など)

オートコンプリートの結果に入力されるデータはソースと呼ばれます。ソースには、検索用語の静的なセット、Algolia インデックスなどの外部ソースからの検索結果、最近の検索など、必要なものを何でも使用できます。

これら 2 つの必須パラメータ ( containerとgetSources ) だけを構成することで、インタラクティブなオートコンプリートエクスペリエンスを得ることができます。ライブラリは入力を作成し、対話性とアクセシビリティ属性を提供しますが、出力する DOM 要素を完全に制御できます。

スクリーンショット

ドキュメント • API • プレイグラウンド

インストール

推奨される開始方法は、 autocomplete-jsパッケージを使用することです。これには、JavaScript オートコンプリートエクスペリエンスをレンダリングするために必要なものがすべて含まれています。

それ以外の場合、レンダラーを最初から構築する場合は、 autocomplete-coreパッケージをインストールできます。

すべての Autocomplete パッケージは、npm レジストリで入手できます。

yarn add @algolia/autocomplete-js
# or
npm install @algolia/autocomplete-js

パッケージマネージャーを使用しない場合は、HTML script要素を使用できます。

 < script src =" https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js " > </ script >
< script >
  const { autocomplete } = window [ '@algolia/autocomplete-js' ] ;
</ script >

使用法

始めるには、オートコンプリートを入れるためのコンテナが必要です。まだコンテナを持っていない場合は、マークアップにコンテナを挿入できます。

 < div id = "autocomplete" > < / div >

次に、 autocomplete関数を呼び出してcontainerを指定することで、オートコンプリートを挿入します。 CSS セレクターまたは要素にすることができます。

inputではなく、必ずコンテナー ( divなど) を指定してください。オートコンプリートは、完全にアクセス可能な検索ボックスを生成します。

 import { autocomplete } from '@algolia/autocomplete-js' ;

autocomplete ( {
  container : '#autocomplete' ,
  // ...
} ) ;

スタートガイドを読み続けてください。

ドキュメント

ドキュメントでは、オートコンプリートライブラリについて学ぶためのいくつかの方法が提供されています。

SourcesやState などの基礎となる原則について詳しくは、 「Core Concepts」を読んでください。
ガイドに従って、一般的な UX パターンを構築する方法を理解してください。
パラメーターとオプションの包括的なリストについては、 API リファレンスを参照してください。
基本的な実装をフォークして試すことができるPlaygroundを試してください。

詳細については、ドキュメントを参照してください。

サポート

GitHub ディスカッション

パッケージ

パッケージ	説明	ドキュメント
`autocomplete-js`	オートコンプリート用の JavaScript パッケージ	ドキュメント
`autocomplete-core`	オートコンプリートエクスペリエンスを構築するための JavaScript コアプリミティブ	ドキュメント
`autocomplete-plugin-recent-searches`	最近の検索をオートコンプリートに追加するプラグイン	ドキュメント
`autocomplete-plugin-query-suggestions`	オートコンプリートにクエリの提案を追加するプラグイン	ドキュメント
`autocomplete-plugin-algolia-insights`	Algolia Insights をオートコンプリートに追加するプラグイン	ドキュメント
`autocomplete-plugin-redirect-url`	リダイレクトURLを有効にするプラグイン	ドキュメント
`autocomplete-plugin-tags`	オートコンプリートでタグのリストを管理および表示するプラグイン	ドキュメント
`autocomplete-preset-algolia`	オートコンプリートで Algolia 機能を使用するためのプリセット	ドキュメント
`autocomplete-theme-classic`	オートコンプリートのクラシックテーマ	ドキュメント