實作自動完成

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
適用性表單

建立對象：

初學者
開發人員

使用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);
    }

});

使用emoji的建議

國家/地區建議

下列程式碼用於顯示建議清單中的emoji

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