awesomleteでJavaScriptオートコンプリートウィジェットを構築します

WebアプリのAutocompleteは、ユーザーが入力するときに残りの単語または文を予測します。ユーザーは通常、タブキーを押して提案を受け入れるか、下矢印キーを押して複数の提案のいずれかを受け入れます。

このチュートリアルでは、Awesomplete JavaScriptライブラリを使用してWebサイトにオートコンプリートコンポーネントを作成する方法を説明します。 Awesompleteは、W3C CSSワーキンググループの有名なスピーカー、ライター、スペシャリストであるLea Verouによって設立されました。

キーポイント

Awesompleteは、Webアプリケーションでオートコンプリート機能のためにLea Verouが開発した軽量でカスタマイズ可能なJavaScriptライブラリです。依存関係がなく、すべての最新のブラウザと互換性があります。
awesompleteを使用するには、Webページに2つのファイルを含める必要があります：awesomplete.cssおよびawesomplete.js。基本的なコンポーネントには、クラス「Awesomlete」を持つ入力要素と、Datalist要素に関連するオプションが必要です。
Awesompleteは、オートコンプリートコンポーネントのカスタマイズに使用できる、フィルター、ソート、アイテム、交換など、さまざまなプロパティを提供します。これらのプロパティは、エントリのマッチング方法、リストアイテムのソート方法、リストアイテムの生成方法、ユーザーの選択がユーザー入力を置き換える方法を制御します。
ライブラリは、動作をさらにカスタマイズするための複数の方法と、さまざまなユーザーインタラクションに応答するために使用できる5つのカスタムイベントを提供します。また、動的データとリモートデータソースで使用することもでき、Webサイトのユーザーエクスペリエンスを強化するための多用途ツールになります。

html5データリスト要素を使用してみませんか？

HTML5 Datalist要素は、おそらくWebサイトAutocompleteを実装する最も簡単な方法です。残念ながら、この要素にはブラウザのサポートが限られており、その実装は一貫性がありません（たとえば、Chromeは最初からのみ一致し、Firefoxはどこでも一致します）。また、あなたのウェブサイトのデザインに基づいてスタイルを整えることも不可能であり、有望である間、これはまだ正しい選択ではないかもしれません。

一方、Awesompleteは、ページに入れることができる超軽量でカスタマイズ可能なオートコンプリートコンポーネントです。依存関係はありません（jqueryなし）、すべての最新のブラウザで実行され、ウェブサイトのテーマに従ってスタイルを整えることができます。

それで、私たちは何を待っていますか？始めましょう！

ページにawesomplete

を含めます Awesompleteライブラリを使用するには、2つのファイルが必要です。Awesomplete.cssとawesomplete.js。

Bowerを使用してこれらのファイルを取得できます

は、Awesomplete Webサイトから直接ダウンロードすることもできます。

<code>bower install https://github.com/LeaVerou/awesomplete.git#gh-pages</code>

または、rawGitCDNを含めてそれらを含めます（正しいコンテンツタイプのヘッダーを使用して、GitHubから元のファイルを直接提供します）。以下に示すように。

基本的なコンポーネントをインスタンス化するには、クラスがawesompleteしている入力要素と、Datalist要素に関連するオプションが必要です。入力要素のリスト属性は、データリスト要素のIDと一致する必要があります。これは、JavaScriptを無効にするユーザーにフォールバックソリューションを提供するため、合理的なデフォルト構成です。

<code>bower install https://github.com/LeaVerou/awesomplete.git#gh-pages</code>

基本的な関数

この多機能ライブラリを使用する方法はたくさんあります。基本的なユースケースから始めましょう。

データリスト属性

を使用します 上記のデータリスト要素のオプションは、入力要素自体のデータリスト属性に移動できます。

JavaScript

<link rel="stylesheet" href="https://cdn.rawgit.com/LeaVerou/awesomplete/gh-pages/awesomplete.css">
<input class="awesomplete" list="mylist" />
<datalist id="mylist">
  <option value="One">
  <option value="Two">
  <option value="Three">
</datalist>
<🎜>

を使用して

オートコンプリートオプションが静的である場合、上記のソリューションは非常に便利です。ただし、リストを動的に作成し、AutoCompleteコンポーネントの動作をさらにカスタマイズするには、JavaScriptメソッドが必要です。

<input class="awesomplete"
       data-minchars="1"
       data-maxitems="5"
       data-list="China, India, Japan, Russia, UK, USA" />

ここでは、awesompleteオブジェクトを作成し、入力要素への参照と、構成オプションを含むオブジェクトリテラルの2つのパラメーターを渡します。

次に、Autocompleteオプションのリストを保持する配列に、Awesomletletオブジェクトのリストプロパティを割り当てます。次のデモでは、この便利なコードスニペットを使用して、国名配列を展開しました。

また、以前のデモでは、Minchars、Maxitems、およびAutofirstプロパティは、データマンキャー、データ最大値、およびデータ自動性のあるプロパティと同じであることに注意してください。

JavaScriptを使用してオートコンプリートコンポーネントをインスタンス化する場合、他の多くのプロパティ、API、およびイベントにアクセスできます。彼らが何であるか、そしてそれらをどのように使用するか見てみましょうか？

拡張JavaScriptプロパティ

awesompleteオブジェクトは、他の4つのプロパティをサポートします。それらは、フィルター、ソート、アイテム、および交換です。 4つの属性はすべて、関数が割り当てられています。

フィルター属性は、エントリの一致方法を制御します。そのコールバック関数は、現在の提案テキスト（私たちの例では、「中国」、「インド」、「日本」、「ロシア」、「英国」、「USA」の各値とユーザーを含む文字列を含む2つのパラメーターを取ります。入力。デフォルトでは、入力は文字列内のどこにでも一致し、ケースに伴う感受性です。

次の例は、驚くべきパフォーマンスのケースに敏感なマッチングを行う方法を示しています。

並べ替え属性は、リストアイテムのソート方法を制御します。そのコールバック関数は、array.prototype.sort（）関数と同じプロトタイプを持っています。

var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  minChars: 1,
  maxItems: 5,
  autoFirst: true
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];

これを使用して一致を逆アルファベット順に並べ替える方法を示します：

item属性リストアイテムを生成する方法を制御します。このコールバック関数には、現在推奨されているテキストとユーザー入力の2つのパラメーターもあります。リスト項目を返す必要があります。項目属性を使用して、提案テキストのユーザー入力を強調表示する方法は次のとおりです。

function myFilterFunc(text, input) {
  return text.indexOf(input) > -1;
}

var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  filter: myFilterFunc
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];

4番目と最後の属性は、置換属性です。交換属性は、ユーザーがユーザー入力を交換する方法を選択する方法を制御します。前の3つの関数と比較して、このコールバック関数は1つのパラメーターを受け入れます。選択したオプションのテキストです。ユーザーが提案されたオプションのいずれかを選択すると（たとえば、クリックして）、トリガーされます。

これを使用してユーザーの選択を大文字に変換する方法です。

function mySortFunc(text, input) {
  return text.localeCompare(input); // 修正此处，使用localeCompare进行排序
}

var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  sort: mySortFunc
});
awesomplete.list = ['Albania', 'Brazil', 'Chile', 'Denmark', 'Egypt'];

すべてのコンテンツを統合します

これは、フィルターとアイテムの機能を組み合わせて、ユーザーが指定された文字（この場合はコンマの後にスペースが続く）を入力した後にのみ提案をする方法を示すデモです：

dig deeper—イベント、apis、ajax

function myItemFunc(text, input){
  return Awesomplete.$.create("li", {
    innerHTML: text.replace(RegExp(input.trim(), "gi"), "<mark>$&</mark>"),
    "aria-selected": "false"
  });
}

var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  item: myItemFunc
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];

このライブラリは、5つのカスタムイベントをトリガーします。これらは、Awecomplete-Select、Awecomplete-SelectComplete、Awecomplete-Open、Awecomplete-Close、Awecomplete-Highlightです。

これらの各イベントに接続する方法は次のとおりです。

awesompleteは、動作をカスタマイズできるようにするawesompleteオブジェクトにさまざまな方法を提供します。

<code>bower install https://github.com/LeaVerou/awesomplete.git#gh-pages</code>

open（）：ポップアップウィンドウを開くために使用されます。

close（）：ポップアップウィンドウを閉じるために使用されます。
next（）：ポップアップの次のアイテムを強調表示するために使用されます。
前（）：ポップアップウィンドウで以前のアイテムを強調表示するために使用されます。
goto（i）：ポップアップウィンドウにインデックスIを使用してアイテムを強調表示するために使用されます（-1はすべてのアイテムを解除することを意味します）。
select（）：現在強調表示されているアイテムを選択し、テキストフィールドの値をそれに置き換え、ポップアップウィンドウを閉じます。
evaluate（）：コンポーネントの現在の状態を評価し、提案リストを再生するために使用されます。提案がない場合は、ポップアップを閉じてください。この方法は、ポップアップウィンドウが開いているときにリストプロパティを動的に設定する場合に特に役立ちます。
7. 注：open（）は現在、入力イベントがトリガーされる前にリストを開いていませんが、この問題を解決するはずのプロジェクトホームページにプルリクエストがあります。

終了

最後の例として、Ajaxを介してリモートAPIから取得されたデータでAwesomleteを使用する方法を次に示します。ここでは、Rest Coundry APIを使用します。これにより、ユーザーに多くの国のデータが提供されます。

最初に、リストプロパティを設定せずにコンポーネントを初期化します（私はここでjqueryを使用して簡潔にしています）：

次に、キーアップイベントリスナーを添付してください：

<link rel="stylesheet" href="https://cdn.rawgit.com/LeaVerou/awesomplete/gh-pages/awesomplete.css">
<input class="awesomplete" list="mylist" />
<datalist id="mylist">
  <option value="One">
  <option value="Two">
  <option value="Three">
</datalist>
<🎜>

ユーザーがキーを押すと、入力要素の値を取得してリクエストを行う必要があります。

それだけです！

var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  minChars: 1,
  maxItems: 5,
  autoFirst: true
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];

結論

function myFilterFunc(text, input) {
  return text.indexOf(input) > -1;
}

var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  filter: myFilterFunc
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];

このチュートリアルでは、プロジェクトで軽量でカスタマイズ可能なAwesompleteライブラリを使用して、オートコンプリートコンポーネントを簡単に実装する方法を見ました。このプロジェクトはまだアクティブなメンテナンスを受けているので、チェックアウトすることをお勧めします。

JavaScript Autocompleteコンポーネントに関する

FAQ -Awesomplete's FAQ

私のプロジェクトにAwesompleteをインストールして使用する方法は？

Awesompleteをインストールするには、NPMを使用するか、GitHubリポジトリから直接ダウンロードできます。インストール後、HTMLファイルにawesomplete.cssとawesomplete.jsファイルを含めます。 Awesompleteを使用するには、HTMLに入力要素を作成し、新しいAwesomplete（入力）でAwesompleteを初期化します。その後、リストに提案配列で記入できます。

awesompleteletreteドロップダウンメニューの外観をカスタマイズできますか？

はい、awesomplete.cssファイルのCSSクラスを上書きすることにより、awesompleteteドロップダウンメニューの外観をカスタマイズできます。色、フォント、その他のスタイルを変更して、Webサイトのデザインに合わせて変更できます。

動的データでawesompleteを使用する方法は？

awesompleteは、リストプロパティを使用して動的なデータで使用できます。リストプロパティを提案配列に設定できます。これにより、配列が変更されると、ドロップダウンメニューが自動的に更新されます。

リモートデータソースでawesompleteを使用できますか？

はい、AJAX関数を使用してリモートデータソースを使用してAwesomleteを使用できます。 Ajax関数は、URLとコールバック関数を受け入れ、URLからデータを取得し、コールバック関数に渡します。

awesompleteで選択イベントを処理する方法は？

「AwesomleteTeletelect」イベントを使用して、aweesomertleteで選択イベントを処理できます。このイベントは、提案が選択されたときにトリガーされ、イベントリスナーを追加して処理できます。

複数の入力フィールドでawesompleteを使用できますか？

はい、複数の入力フィールドでawesomleteを使用できます。入力フィールドごとに新しいAwesompleteインスタンスを作成するだけです。

awesompleteで提案をフィルタリングする方法は？

フィルター関数を使用して、awesompleteで提案をフィルタリングできます。フィルター関数は、提案と入力値を受け入れ、提案が入力値と一致する場合にtrueを返します。

他のJavaScriptライブラリでAwesompleteを使用できますか？

はい、他のJavaScriptライブラリでAwesomleteを使用できます。 Awesompleteはスタンドアロンライブラリであるため、依存関係がなく、他のライブラリと矛盾しません。

awesompleteで提案を並べ替えるにはどうすればよいですか？

sort関数を使用して、提案をawesometleteで並べ替えることができます。ソート関数は2つの提案を受け入れ、提案の順序でネガティブ、ゼロ、または正の数を返します。

私の形でawesompleteを使用できますか？

はい、あなたはあなたのフォームでawesomleteを使用できます。提案を選択した後、入力フィールドの値は提案に設定されているため、フォームで送信できます。

この改訂された出力は、awesperteのより包括的かつ正確な説明を提供します

以上がawesomleteでJavaScriptオートコンプリートウィジェットを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。