我无法让 jQueryUI 自动完成菜单项工作的自定义输出

Question

所以我试图将一个从 JSON 字符串解析的对象中的值传递到一个 jQueryUI 自动完成的东西中，并且我试图从一个二维数组中获取三个不同的值，如下所示：

[{1:a1, 2:b1,3:c1,4:d1},{1:a1, 2:b1,3:c1,4:d1}]

这只是对象的表示，但我需要在一个结果项中包含三个值。

所以无论我尝试什么，都会发生以下两种情况之一：

1) 当我使用从the jQueryUI site 修改的以下代码时，\以及来自 jQueryUI 站点的 css 文件，我得到以下结果：

.data("ui-autocomplete")._renderItem = function(ul, item) {
    return $("<li>")
    .attr("data-value", item[1])
    .append("<a>")
    .append("<span class='cardName'>" + item[1] + "</span>") 
    .append("<span class='setName'>" + item[3] + "</apan>")
    .append("<span class='rarity'>" + item[2] + "</span>")
    .append("</a>")
    .appendTo(ul);
}

这是我自己使用的 CSS：

.cardName           { float:left; width:70%; font-weight:bold; text-align:left; }
.setName            { float:right; width:10%; text-align:right; }
.rarity             { float:right; width:15%; text-align:right; }

---

这就是它的样子：

起初看起来不错，但选择区域只有几个像素高，与文本完全不匹配。

然后，当我尝试使用以下内容时：

.data("ui-autocomplete")._renderMenu = function(ul, item) {
  var that = this;
  $.each( items, function( index, item ) {
    that._renderItemData( ul, item ); //(Also tried that._renderItem(ul,item))
  });
}

所有文本都消失了，选择区域仍然太小，但鼠标悬停选择似乎更流畅了。我正在尝试找到一种方法来保持这种平滑度，但是每个菜单项都需要正确的大小并显示文本。我试过搜索谷歌，我发现了一些关于覆盖 _renderItem 和 _renderMenu 函数的东西，但我对 JavaScript 真的很陌生，虽然我试过并查了一些东西，但我可能没有正确完成它，因为它还是不行。

我希望有人能告诉我如何让它正常工作。

Answer 1

.append 不是这样工作的。 .append("<a>") 实际上立即附加了一个结束标记（换句话说，它相当于.append("<a></a>")。您需要构建一个包含spans 的锚标记，然后将 that 附加到 li你最终会回来：

.data("ui-autocomplete")._renderItem = function(ul, item) {
    var href = $('<a />')
        .append("<span class='cardName'>" + item[1] + "</span>") 
        .append("<span class='setName'>" + item[3] + "</apan>")
        .append("<span class='rarity'>" + item[2] + "</span>");

    return $('<li />')
        .attr("data-value", item[1])
        .append(href)
        .appendTo(ul);
}

示例： http://jsfiddle.net/WP29E/145/