Implementazione automatica completata

Implementa la funzionalità di completamento automatico nei moduli AEM utilizzando la funzione di completamento automatico di jquery.
L’esempio incluso in questo articolo utilizza una varietà di origini dati (array statico, array dinamico popolato da una risposta REST API) per popolare i suggerimenti man mano che l’utente inizia a digitare nel campo di testo.

Il codice utilizzato per eseguire la funzionalità di completamento automatico è associato all’evento initialize del campo .

Suggerimento per l'indirizzo

Di seguito è riportato il codice utilizzato per fornire suggerimenti sull'indirizzo della strada

$(".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);
    }

});

Suggerimenti con emoji

Il codice seguente è stato utilizzato per visualizzare le emoji nell'elenco dei suggerimenti

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
}

);

La è possibile scaricare il modulo di esempio da qui. Assicurati di fornire il tuo nome utente/chiave API utilizzando l'editor di codice per il codice per effettuare chiamate REST con successo.

Risorse Business.Adobe.com