实施自动完成

Last update: Mon Mar 24 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

适用对象：
Experience Manager 6.5

主题：
自适应表单

创建对象：

初学者
开发人员

使用jquery的自动完成功能，在AEM表单中实施自动完成功能。
本文包含的示例使用各种数据源（静态数组，通过REST API响应填充的动态数组）在用户开始键入文本字段时填充建议。

用于完成自动完成功能的代码与字段的初始化事件相关联。

为地址提供建议

国家/地区建议

下面是用来提供街道地址建议的代码

$(".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);
    }

});

使用表情符号的建议

国家/地区建议

以下代码用于显示建议列表中的表情符号

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
}

);

可从此处下载示例表单。请确保使用代码的代码编辑器提供您自己的用户名/API密钥，以成功进行REST调用。

NOTE

要使自动完成正常工作，请确保您的表单使用以下客户端库cq.jquery.ui。此客户端库随AEM提供。

recommendation-more-help

8de24117-1378-413c-a581-01e660b7163e