このチュートリアルでは、Awesomplete JavaScriptライブラリを使用してWebサイトにオートコンプリートコンポーネントを作成する方法を説明します。 Awesompleteは、W3C CSSワーキンググループの有名なスピーカー、ライター、スペシャリストであるLea Verouによって設立されました。
キーポイント
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>
基本的なコンポーネントをインスタンス化するには、クラスが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> <🎜>
<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プロパティ
フィルター属性は、エントリの一致方法を制御します。そのコールバック関数は、現在の提案テキスト（私たちの例では、「中国」、「インド」、「日本」、「ロシア」、「英国」、「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"];これを使用してユーザーの選択を大文字に変換する方法です。
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"];これらの各イベントに接続する方法は次のとおりです。
awesompleteは、動作をカスタマイズできるようにするawesompleteオブジェクトにさまざまな方法を提供します。
<code>bower install https://github.com/LeaVerou/awesomplete.git#gh-pages</code>
open（）：ポップアップウィンドウを開くために使用されます。
最後の例として、Ajaxを介してリモートAPIから取得されたデータでAwesomleteを使用する方法を次に示します。ここでは、Rest Coundry APIを使用します。これにより、ユーザーに多くの国のデータが提供されます。
次に、キーアップイベントリスナーを添付してください：
<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" />それだけです！
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"];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は、リストプロパティを使用して動的なデータで使用できます。リストプロパティを提案配列に設定できます。これにより、配列が変更されると、ドロップダウンメニューが自動的に更新されます。
はい、AJAX関数を使用してリモートデータソースを使用してAwesomleteを使用できます。 Ajax関数は、URLとコールバック関数を受け入れ、URLからデータを取得し、コールバック関数に渡します。
「AwesomleteTeletelect」イベントを使用して、aweesomertleteで選択イベントを処理できます。このイベントは、提案が選択されたときにトリガーされ、イベントリスナーを追加して処理できます。
はい、複数の入力フィールドでawesomleteを使用できます。入力フィールドごとに新しいAwesompleteインスタンスを作成するだけです。
フィルター関数を使用して、awesompleteで提案をフィルタリングできます。フィルター関数は、提案と入力値を受け入れ、提案が入力値と一致する場合にtrueを返します。
はい、他のJavaScriptライブラリでAwesomleteを使用できます。 Awesompleteはスタンドアロンライブラリであるため、依存関係がなく、他のライブラリと矛盾しません。
sort関数を使用して、提案をawesometleteで並べ替えることができます。ソート関数は2つの提案を受け入れ、提案の順序でネガティブ、ゼロ、または正の数を返します。
はい、あなたはあなたのフォームでawesomleteを使用できます。提案を選択した後、入力フィールドの値は提案に設定されているため、フォームで送信できます。
この改訂された出力は、awesperteのより包括的かつ正確な説明を提供します
以上がawesomleteでJavaScriptオートコンプリートウィジェットを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
