#はじめに
jQuery UI のウィジェット、オートコンプリートの中の処理を把握したいと思い、オプションである、sourceについて調べたので、その記録。
前回横道にそれてコールバックについて調べるのに時間がかかってしまった、こちらの続きになります、、
JQuery UIのautocompleteのオプションについて詳しく記録していく。
#gets two arguments
ドキュメントの解読を進めていく。
Autocomplete Widget
The callback gets two arguments
赤枠の中の、Functionの説明の最後に「コールバックは2つの引数を受ける」とあり、その下に2つの引数の説明がそれぞれ、
A request
A response
から始まっている。
##request
A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".
↓
このプロパティは、入力されたテキストの値を参照します。例えば、ユーザーが都市フィールドに "new yo" と入力した場合、このtermは"new yo" となります。
この説明から
$("#form").autocomplete ({
source: function (request, response) {
$.ajax({
url: 'suggest',
type: 'GET',
cache: false,
dataType: "json",
data: { keyword: request.term },
success: function (data) {
response(data);
},
error: function (err) {
response(err);
}
});
}
});
このような場合の、
data: { keyword: request.term },
req.termがフォームからの入力値であり、それがajaxのオプションの dataに渡されている事がわかる。
##response
A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.
↓
このコールバックはユーザに提案するデータ(リスト)を一つの引数として期待しています。このデータは、提供された（入力された）用語に基づいてフィルタリングされなければならず、単純なローカルデータのために上記で説明した形式のいずれかにすることができます。カスタムソースコールバックを提供する際には、リクエスト中のエラーを処理することが重要です。エラーが発生した場合でも、常にレスポンスコールバックを呼び出す必要があります。これにより、ウィジェットが常に正しい状態であることが保証されます。
※分かる範囲で和訳しているのですが、大きく間違えていたらすみません、、
data: { keyword: request.term },
success: function (data) {
response(data);
},
上の部分を見ると、successの中にresponsが関数として書かれている事がわかる。
その引数に、
data: { keyword: request.term }
が渡されている。
結果、jQuery UIに定義されたrequestという関数で、ユーザーにautocompleteで見せるsuggestのリストができる。
またここで、response自体が関数で、sourceという関数に、パラメータで渡されている関数だからコールバックである。という事がわかる。
#まとめ
ここまでドキュメントを読んだり、コールバックについて調べる事で、少しずつ中でどういった処理が行われているのか理解することができた。自分の望む通りに動いていても、ライブラリ等を使っていて全く内容が把握できていないのは問題だと思ったし、気持ち悪かったので、調べてみました。まだまだ把握できていない部分は多いがこれからも同じ様に調べて記録していきたい。
#他の参考にさせて頂いた記事
-Autocomplete | jQuery UI 1.10 日本語リファレンス | js STUDIO
#終わりに。
最後まで読んで頂きありがとうございます
転職の為、未経験の状態からRailsを学習しております。正しい知識を着実に身に着け、実力のあるエンジニアになりたいと考えています。継続して投稿していく中で、その為のインプットも必然的に増え、成長に繋がるかと考えています。
今現在、初心者だからといって言い訳はできないですが、投稿の内容に間違っているところや、付け加えるべきところが多々あるかと思いますので、ご指摘頂けると幸いです。この記事を読んで下さりありがとうございました。