jQuery的自动完成JSON不会显示-CSS问题?

时间:2018-11-23 19:20:48

标签: jquery autocomplete display

我正在尝试通过自动填写partNumb id来获取零件号和描述。

我收到针对我的自动完成请求的PHP响应:

[{
"partNumb":"500406-12610532",
"partDesc":"Bray Series 50 ",
"vendName":"U",
"manuName":"Bray"
}] 

我正在使用最简单的AC请求:

$('#partNumber_1').autocomplete(
{
   minLength:4,
   source: "db_AC.php?name=PN",
   dataType: "json"
});

浏览器显示两个瘦的LI,但其中没有任何东西...

如何在描述文本字段中为partNumb和零件描述添加标签?

谢谢

1 个答案:

答案 0 :(得分:0)

尽我所能see in the docs,您的数据需要遵守来源支持的格式:[{label: "Choice1", value: "value1"}, ...]

如果您无法编辑此响应,则需要过滤数据。我建议您做一个ajax来检索数据并将其放入一个变量,然后按如下所示进行过滤

$(function() {
  //stored variable from ajax call
  var dataFromPhp = [{
    "partNumb": "500406-12610532",
    "partDesc": "Bray Series 50 ",
    "vendName": "U",
    "manuName": "Bray"
  }, {
    "partNumb": "500406-12610532",
    "partDesc": "Test Series 50 ",
    "vendName": "A",
    "manuName": "Allin"
  }];

  var filter = $.map(dataFromPhp, function(data, i) {
    return [{
      label: data.partDesc,
      value: data.partNumb
    }];
  });

  $('#partNumber_1').autocomplete({
    minLength: 2,
    source: filter,
    //source: "db_AC.php?name=PN", USE THIS IN AJAX CALL
    //dataType: "json"
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


<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>

<div>
  <label for="tags">Autocomplete: </label>
  <input id="partNumber_1">
</div>