自动填充功能不会在列表中显示结果

时间:2017-07-14 11:45:08

标签: jquery autocomplete

我设法从数据库中获取结果,给定的var products是我在检查元素时看到的结果。唯一的问题是应该包含结果的列表是不可见的。

我还试图检查列表中的元素,这是我得到的

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" tabindex="0" style="display: none; top: 136px; left: 865px; width: 402px;">
    <li class="ui-widget-content ui-menu-divider"></li>
</ul>

空白列表。这是第一次尝试自动完成。请帮忙。

$(function() {
  {
    var products = [{
      "product_code": "ABC1233",
      "product_id": 1,
      "product_name": "National Stove Testing"
    }];
    $("#find_product").autocomplete({
      source: products,
      select: function(even, ui) {
        $("#id").val(ui.item.id); //ignore this
        $("#name").val(ui.item.value); //ignore this
        $("#type").val(ui.item.type); //ignore this
      }
    });
  }
});
<div class="ui-widget">
  <label for="find_product">Find Product: </label>
  <input id="find_product">
</div>

1 个答案:

答案 0 :(得分:1)

小提琴 - http://jsfiddle.net/darjiyogen/kq7pL4kh/1/

  $(document).ready(function () {
var products = [{
  "value": "aBCD",
  "id": 1,
  "label": "National Stove Testing"
},{
  "value": "EF",
  "id": 2,
  "label": "WEWE Stove Testing"
}];

$("#find_product").autocomplete({
    source: products,
      minLength: 1
});

});
<div class="ui-widget">
  <label for="find_product">Find Product: </label>
  <input id="find_product">
</div>