jQuery自动完成列表没有显示出来

时间:2017-07-04 21:54:33

标签: javascript php jquery

我有以下代码但是它的返回数据但问题是list members没有显示/填充我不知道我做错了什么?

https://angular.io/guide/router#milestone-5-route-guards

ui-list

从PHP返回数据

$("input#ProdDesc").autocomplete({
  autoFocus: true,
  source: "includes/modProducts/search-products.php",
  minLength: 1,
  select: function(event, ui) {
    var item = ui.item;
    if (item) {
      $(this).closest('.row').find('input#ProdDesc').val(item.prod_name);
      $(this).closest('.row').find('input#prodctCode').val(item.prod_code);

    }
  }
});

[{ "prod_code": "SPC-00001", "prod_name": "Testing Product Name1" }, { "prod_code": "SPC-00002", "prod_name": "Product Name Again " }] 项目显示如下:

1 个答案:

答案 0 :(得分:2)

根据Terry的评论,您的网址应以适当的格式回复:

[{label: "Testing Product Name1", value: "SPC-00001"}]

如果您无法修改网址的响应,可以尝试以下操作:



$(function() {
  $("input#ProdDesc").on("keypress", function() {
    $.ajax({
      url: "https://gist.githubusercontent.com/dannyjhonston/f4ffea60e7dc86a2d8dadfe477870294/raw/aec441e65a6e9e535feef16b9e970b4276baf346/products.json",
      type: "GET"
    }).done(function(response) {
      // response = [{"prod_code":"SPC-00001","prod_name":"Testing Product Name1"},{"prod_code":"SPC-00002","prod_name":"Product Name Again"}].
      var result = [],
        i, data = JSON.parse(response),
        len = data.length;
      for (i = 0; i < len; i++) {
        result.push({
          label: data[i].prod_name,
          value: data[i].prod_code
        });
      }

      // result = [{"label":"Testing Product Name1","value":"SPC-00001"},{"label":"Product Name Again","value":"SPC-00002"}].
      $("input#ProdDesc").autocomplete({
        autoFocus: true,
        source: result,
        minLength: 1,
        select: function(event, ui) {
          var item = ui.item;
          if (item) {
            console.log(item);
          }
        }
      });
    });
  });
});
&#13;
.as-console-wrapper .as-console {
  background: linear-gradient(#fff, #818eb3);
}
&#13;
<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">
<input id="ProdDesc" type="text" />
&#13;
&#13;
&#13;