Question

我正在尝试自定义JQuery中自动完成元素的外观以显示名称（desc）的值。但是desc没有表现出来。谢谢你的建议。

这就是我的php的json echo的样子。

google-chrome-stable --headless --disable-gpu --no-sandbox http://www.google.com

我的HTML。

[{"value":"normal grade size A KW\/KA125","label":"6","desc":"normal grade size A KW\/KA125"},{"value":"normal grade size B KW\/KA125","label":"7","desc":"normal grade size B KW\/KA125"}]

我的代码。

<div id="package-label">Select a package:</div>
<input id="package" />
<input type="hidden" id="package-id"/>
<p id="package-description"></p>

Answer 1

建议在此处查看来源：http://jqueryui.com/autocomplete/#custom-data

然后使用代码：

.autocomplete( "instance" )._renderItem = function (ul, item) {
  return $("<li>")
    .data("item.autocomplete", item)
    .append("<div><a>" + item.label + "<br>" + item.desc + "</a></div>")
    .appendTo(ul);
};

结果应具有以下格式：

<li>
  <div>
    <a>Label<br>Description</a>
  </div>
</li>

不确定您使用a的原因。我不建议这样做。会建议如下：

.autocomplete( "instance" )._renderItem = function (ul, item) {
  return $("<li>")
    .append("<div><span class='itemLabel'>" + item.label + "</span><span class='itemDesc'>" + item.desc + "</span></div>")
    .appendTo(ul);
};

使用以下CSS：

.ui-autocomplete .itemLabel {
  display: block;
}

jqueryUI没有显示描述

1 个答案: