Mise en oeuvre automatique

Mettez en oeuvre 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 commence à saisir du texte dans le champ.

Le code utilisé pour accomplir la fonctionnalité de saisie semi-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 l’émoticône

Le code suivant a été utilisé pour afficher les é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
}

);

Le exemple de formulaire peut être téléchargé d’ici. Veillez à fournir votre propre nom d’utilisateur/clé d’API à l’aide de l’éditeur de code pour que le code effectue des appels REST réussis.

Ressources Business.Adobe.com