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 .
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);
}
});
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.
Per il completamento automatico, assicurati che il modulo utilizzi la seguente libreria client cq.jquery.ui. Questa libreria client viene fornita con AEM.