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
}

);

The exempelformulär kan laddas ned 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
Se till att formuläret använder följande klientbibliotek för att slutföra automatiskt cq.jquery.ui. Det här klientbiblioteket levereras med AEM.
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e