Implementazione del completamento automatico
Implementare la funzionalità di completamento automatico nei moduli AEM utilizzando la funzione di completamento automatico di jquery.
L’esempio incluso in questo articolo utilizza diverse origini di dati (array statico, array dinamico popolato da una risposta API REST) per compilare i suggerimenti quando l’utente inizia a digitare nel campo di testo.
Il codice utilizzato per eseguire la funzionalità di completamento automatico è associato all’evento di inizializzazione del campo.
Suggerimento per l'indirizzo
Di seguito è riportato il codice utilizzato per fornire suggerimenti sugli indirizzi stradali
$(".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 le emoji
Il seguente codice è 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
}
);
Il il modulo di esempio può essere scaricato da qui. Assicurati di fornire un nome utente/chiave API personalizzato utilizzando l’editor di codice per il codice per effettuare chiamate REST riuscite.