Implémenter la saisie automatique
Implémentez la fonctionnalité de saisie automatique dans AEM Forms à l’aide de la fonction de saisie automatique de jQuery.
L’exemple inclus dans cet article utilise diverses sources de données (tableau statique, tableau dynamique renseigné à partir d’une réponse de l’API REST) pour renseigner les suggestions lorsque l’utilisateur ou l’utilisatrice commence à saisir du texte dans le champ.
Le code utilisé pour accomplir la fonctionnalité de saisie automatique est associé à l’événement initialize du champ.
Suggestion d’adresse
Voici le code utilisé pour fournir des suggestions d’adresses de rue :
$(".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);
}
});
Suggestions avec des émoticônes
Le code suivant a été utilisé pour afficher des émoticônes dans la liste de suggestions.
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
}
);
L’exemple de formulaire peut être téléchargé ici. Veillez à fournir votre propre nom d’utilisateur ou d’utilisatrice et clé d’API à l’aide de l’éditeur de code pour que le code effectue des appels REST réussis.