オートコンプリートの実装
jquery のオートコンプリート機能を使用して、AEM Forms にオートコンプリート機能を実装します。
この記事に含まれるサンプルでは、様々なデータソース（REST API 応答から生成された静的配列や動的配列）を使用して、ユーザーがテキストフィールドに入力を開始したときに候補を表示します。
オートコンプリート機能を実行するために使用されるコードは、フィールドの初期化イベントに関連付けられています。
住所の提案
次に、住所の提案に使用するコードを示します
$(".streetAddress input").autocomplete({
source: function(request, response) {
$.ajax({
url: "https://api.geoapify.com/v1/geocode/autocomplete?text=" + request.term + "&apiKey=Your API Key", //please get your own API key with geoapify.com
responseType: "application/json",
success: function(data) {
console.log(data.features.length);
response($.map(data.features, function(item) {
return {
label: [item.properties.formatted],
value: [item.properties.formatted]
};
}));
},
});
},
minLength: 5,
select: function(event, ui) {
console.log(ui.item ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);
}
});
絵文字を使用した提案
候補リストに絵文字を表示するには、次のコードを使用します
var values=["Wolf \u{1F98A}", "Lion \u{1F981}","Puppy \u{1F436}","Giraffe \u{1F992}","Frog \u{1F438}"];
$(".Animals input").autocomplete( {
minLength: 1, source: values, delay: 0
}
);
サンプルフォームは、こちらからダウンロードできます。REST 呼び出しを正常に行うには、コードのコードエディターを使用して独自のユーザー名／API キーを指定します。
NOTE
オートコンプリートを機能させるには、フォームで次のクライアントライブラリ cq.jquery.ui が使用されていることを確認します。このクライアントライブラリは AEM に付属しています。
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e