Implementierung der automatischen Vervollständigung
Implementieren Sie die Funktion für die automatische Vervollständigung in AEM-Formularen mithilfe der Funktion zur automatischen Vervollständigung von jQuery.
Das in diesem Artikel enthaltene Beispiel verwendet eine Vielzahl von Datenquellen (statisches Array, dynamisches Array, das aus einer REST-API-Antwort gefüllt wird), um die Vorschläge zu füllen, wenn die Benutzerin bzw. der Benutzer mit der Eingabe in das Textfeld beginnt.
Der Code, der zum Ausführen der Funktion für die automatische Vervollständigung verwendet wird, ist mit dem Ereignis „initialize“ des Feldes verknüpft.
Vorschlag für die Adresse
Der folgende Code wird verwendet, um Vorschläge für Straßenadressen bereitzustellen
$(".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);
}
});
Vorschläge mit Emoji's
Der folgende Code wurde verwendet, um Emoji in der Liste mit Vorschlägen anzuzeigen:
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
}
);
Das Beispielformular kann hier heruntergeladen werden. Stellen Sie sicher, dass Sie mithilfe des Code-Editors Ihren eigenen Benutzernamen/API-Schlüssel für den Code angeben, damit der REST-Aufruf erfolgreich ist.