时间戳

首页 > 解决方案 > jquery autocomplete json 不会显示 - css 问题？

jquery - jquery autocomplete json 不会显示 - css 问题？

问题描述

我试图通过自动完成 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 的标签和部件描述？

谢谢

标签： jqueryautocompletedisplay

解决方案

正如我在文档中看到的那样，您的数据需要尊重源支持的格式：[{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>

推荐阅读