Implémenter la saisie automatique

Dernière mise à jour : 2024-01-29
  • Créé pour :
  • Beginner
    Developer

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

country-suggestions

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

country-suggestions

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.

REMARQUE

Pour que la saisie automatique fonctionne, assurez-vous que votre formulaire utilise la bibliothèque cliente suivante : cq.jquery.ui. Cette bibliothèque cliente est fournie avec AEM.

Sur cette page