Automatisch uitvoeren voltooid
Implementeer de functie Automatisch aanvullen in AEM-formulieren met de functie Automatisch aanvullen van jQuery.
In het voorbeeld dat bij dit artikel wordt geleverd, worden diverse gegevensbronnen gebruikt (statische array, dynamische array die is gevuld met een REST API-reactie) om de suggesties te vullen terwijl de gebruiker in het tekstveld begint te typen.
De code die wordt gebruikt voor het uitvoeren van de functie voor automatisch aanvullen, is gekoppeld aan de gebeurtenis initialize van het veld.
Voorstellen voor adres
Hier volgt de code die wordt gebruikt om suggesties voor adres op straat op te geven
$(".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);
}
});
Suggesties met emoji's
De volgende code is gebruikt om emoji's weer te geven in de lijst met suggesties
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
}
);
De steekproefvorm kan van hier worden gedownload. Zorg ervoor dat u uw eigen gebruikersnaam/API-sleutel opgeeft met de code-editor voor de code om REST-aanroepen te kunnen uitvoeren.