0

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

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

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

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

1）当我使用从jQueryUI 站点修改的以下代码，以及来自 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 真的很陌生，虽然我试过并查了一些东西，但我可能没有正确完成它，因为它仍然不起作用。

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

4

1 回答 1

0

这不是.append工作方式。.append("<a>")实际上立即附加一个结束标记（换句话说，它相当于.append("<a></a>")。您需要构建一个包含的锚标记spans，然后将其附加到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/

于 2013-10-23T01:04:20.497 回答