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

country-suggestions

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

country-suggestions

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.

NOTE
Damit die automatische Verarbeitung funktioniert, stellen Sie sicher, dass Ihr Formular die folgende Client-Bibliothek verwendet cq.jquery.ui. Diese Client-Bibliothek ist mit AEM ausgestattet.
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e