Automatisk komplettering
Implementera funktioner för automatisk ifyllnad i AEM formulär med hjälp av Jquery funktion för automatisk ifyllnad.
I exemplet som ingår i den här artikeln används en rad olika datakällor (statisk array, dynamisk array ifylld från ett REST API-svar) för att fylla i förslagen när användaren börjar skriva i textfältet.
Den kod som används för att utföra funktionen för automatisk komplettering är associerad med händelsen initialize för fältet.
Ange förslag för adress
Följande kod används för att ge förslag på gatuadresser
$(".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);
}
});
Förslag med uttryckssymboler
Följande kod användes för att visa uttryckssymboler i förslagslistan
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
}
);
Exempelformuläret kan hämtas härifrån. Se till att du anger din egen användarnamn/API-nyckel med kodredigeraren för koden för att kunna göra REST-anrop.