Question

我正在处理以下代码中的嵌套getJSON数据，其中＆gt;返回1条记录并按自动完成排序。

{
  "ok": [
    {
      "myName": "Back Office",
      "myModule": "back01",
      "myDesc": "Developing a the platform"
    },
    ......
    ]
}

当最终数据（比如6个匹配记录）传递给.autocomplete( "instance" )时，每次更新return $( "<li>" )的调用似乎都会覆盖以前返回的JSON数据，这意味着只显示最后一条记录而不是6有效是JSON。

我注意到，当调试.autocomplete例程循环正确的次数以匹配记录数时，只是每个循环似乎用新对象覆盖<li>而不是附加到以前的记录。

为什么会发生覆盖？

感谢艺术！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script>
        $( function() {
            $( "#my_module_in" ).autocomplete({
                minLength: 1,
                source: function( request ,response){
                    $.getJSON("https://api.myapi.com/getStuff", function (data) {

                        $.each(data, function (okKey, val00) {
                            if ( okKey === 'ok') {
                                $.each(val00, function (key201, val201) {
                                    response($.map(data, function (item) {
                                        return {
                                            label: val201.myName,
                                            value: val201.myModule+"_"+val201.myDesc,
                                        }
                                    }))
                                })
                            }else{
                                console.log("error:noJson");
                            }
                        })

                    });
                },

                focus: function( event, ui ) {
                    console.log(ui.item.label);
                    return false;
                },
                select: function( event, ui ) {
                    $( "#my_module_in" ).val( ui.item.label);
                    $( "#my_module" ).val( ui.item.value);
                    $( "#my_module_description" ).html( ui.item.value );
                    return false;
                }
            })

                    .autocomplete( "instance" )._renderItem = function( ul, item ) {
                return $( "<li>" )
                        .append( "<div>" + item.label + "<br>" + item.value + "</div>" )
                        .appendTo( ul );

            };

        });
    </script>
</head>
<body>

<div id="my_module_label">Op_Group</div>
<input id="my_module_in">
<input type="hidden" id="my_module">
<p id="my_module_description"></p>

Answer 1

您需要一个包含$.each ($.map())操作中找到的结果的空数组。然后，在$.map()函数中，为每个项目推送空数组中的当前对象。

最后，使用您填充的数组调用响应回调函数。

var result = [];
$.each(val00, function(key201, val201) {
  $.map(data, function(item) {
    result.push({
      label: val201.myName,
      value: val201.myModule + "_" + val201.myDesc
    });
  });
});
response(result);

这样的事情：

$(function() {
  $("#my_module_in").autocomplete({
      minLength: 1,
      source: function(request, response) {
        $.getJSON("https://gist.githubusercontent.com/dannyjhonston/51e9ea30dddd09d9f82a8e78b8a51de2/raw/9ad8b1b40377a6807548b444491846dd13025902/getStuff.json", function(data) {

          $.each(data, function(okKey, val00) {
            if (okKey === 'ok') {
              var result = [];
              $.each(val00, function(key201, val201) {
                $.map(data, function(item) {
                  result.push({
                    label: val201.myName,
                    value: val201.myModule + "_" + val201.myDesc
                  });
                });
              });
              response(result);
            } else {
              console.log("error:noJson");
            }
          });
        });
      },

      focus: function(event, ui) {
        console.log(ui.item.label);
        return false;
      },
      select: function(event, ui) {
        $("#my_module_in").val(ui.item.label);
        $("#my_module").val(ui.item.value);
        $("#my_module_description").html(ui.item.value);
        return false;
      }
    })

    .autocomplete("instance")._renderItem = function(ul, item) {
      return $("<li>").append("<div>" + item.label + "<br />" + item.value + "</div>").appendTo(ul);
    };
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="my_module_label">Op_Group</div>
<input id="my_module_in" type="text">
<input type="hidden" id="my_module">
<p id="my_module_description"></p>

jquery .autocomplete仅显示set中的最后一条记录

1 个答案: