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

landsförslag

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

landsförslag

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.

NOTE
För att automatisk komplettering ska fungera måste formuläret använda följande klientbibliotek: cq.jquery.ui. Det här klientbiblioteket levereras med AEM.
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e