キーポイント

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

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

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

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

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

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

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

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

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

基本的な関數(shù)

この多機能ライブラリを使用する方法はたくさんあります?；镜膜圣姗`スケースから始めましょう。

データリスト屬性

<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>
<??>

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

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

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

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

拡張JavaScriptプロパティ

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

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

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

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

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屬性リストアイテムを生成する方法を制御します。このコールバック関數(shù)には、現(xiàn)在推奨されているテキストとユーザー入力の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"];

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'];

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"];

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

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

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

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

<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"];