$.each 循环中的 jQuery UI 自动完成不显示第一次迭代的结果

Question

我正在使用“jQuery UI 自动完成”来过滤 JSON 数据，我正在使用以下代码

<input type="text" name="searchKeywords" id="ninecSearchKeywords" placeholder="How To...">

然后 JS 为

jQuery(document).ready(function($){
        
    $.getJSON("apiUrl", function(data){

        $.each(data, function(key, value){
            
            $("#ninecSearchKeywords").autocomplete({
              source: value.keys,
              autoFocus: true,
              select: function (event, ui) {
                window.location = value.pageLink;
              }
             });
            
        });
    });

});

JSON 数据是

[
    {
        pageID: "454",
        pageLink: "url",
        sectionID: "a599d36c4c7a71ddcc1bc7259a15ac3a",
        anchorLink: "anchor1",
        keys: [
            "Result 1",
            "Result 2",
            "Result 3"
        ]
    },
    {
        pageID: "455",
        pageLink: "url",
        sectionID: "8d993394c892dcaa8683dc4ba4fae21d",
        anchorLink: "anchor2",
        keys: [
            "Result 4",
            "Result 5",
            "Result 6"
        ]
    },
    {
        pageID: "456",
        pageLink: "url",
        sectionID: "dce6920a3408ae9a8e61b75a4e5fd6ca",
        anchorLink: "anchor3",
        keys: [
            "Result 7",
            "Result 8",
            "Result 9"
        ]
    }
]

这对于 #2 和 #3 迭代工作正常，我能够搜索结果 4 到结果 9，但对于第一次迭代，即结果 1,2 和 3，下拉列表中没有显示结果。

谁能知道这里出了什么问题？

Answer 1

自动完成源不会在循环内更新。首先创建数据，然后将源添加到自动完成。

jQuery(document).ready(function($){
        
    $.getJSON("apiUrl", function(data){
        var keys = [];
        var keyLinkMap = {};
        $.each(data, function(key, value){
            for(let i = 0; i <= value.keys.length; i++) {
                keys.push({label: value.keys[i], value:value.pageLink});            
            }
        });

        $("#ninecSearchKeywords").autocomplete({
              source: keys,
              autoFocus: true,
              select: function (event, ui) {
                window.location = value.pageLink;
              }
         });
    });

});