[英]I can't get custom output for jQueryUI Autocomplete menu items to work
So I'm trying to pass values from an object parsed from a JSON string into a jQueryUI Autocomplete thing, and I'm trying to grab three different values from a 2-dimentional array, as in: 因此,我试图将来自JSON字符串解析的对象的值传递给jQueryUI自动完成对象,并且试图从二维数组中获取三个不同的值,如下所示:
[{1:a1, 2:b1,3:c1,4:d1},{1:a1, 2:b1,3:c1,4:d1}]
Thats just a representation of the object, but I need three values in one result item. 那只是对象的一种表示,但是我在一个结果项中需要三个值。
So no matter what I try, one of two things happen: 因此,无论我尝试什么,都会发生以下两种情况之一:
1) When I use the following code, modified from the jQueryUI site , \\along with a css file from the jQueryUI site, I get the following result: 1)当我使用下面的代码(从jQueryUI站点 \\ along修改)以及来自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);
}
This is my own css that I used as well: 这也是我自己使用过的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; }
This is what it looks like: 看起来是这样的:
Which looks fine at first, but the selection areas are only a few pixels tall, and don't match up with the text at all. 首先看起来不错,但是选择区域只有几像素高,根本与文本不匹配。
Then, when I try to use the following : 然后,当我尝试使用以下命令时:
.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))
});
}
All the text disappears, the selection areas are still way too small, but the mouseover selection seems a lot smoother. 所有文本消失,选择区域仍然太小,但是鼠标悬停选择似乎更加顺畅。 I'm trying to find a way to keep that smoothness, but each menu item needs to be the right size and show the text.
我试图找到一种方法来保持这种平滑度,但是每个菜单项都必须具有正确的大小并显示文本。 I've tried searching Google, and I found some stuff about overriding the
_renderItem
and _renderMenu
functions, but I'm really new to JavaScript and although I tried and looked stuff up, I might not have done it correctly because it still didn't work. 我尝试搜索Google,但发现了一些有关覆盖
_renderItem
和_renderMenu
函数的内容,但是我对JavaScript确实很_renderMenu
,尽管我尝试并查找了内容,但由于它仍然没有正确执行,因此我可能未正确完成操作工作。
I'm hoping someone can show me how to get this to work correctly. 我希望有人可以向我展示如何使其正常工作。
This isn't how .append
works. 这不是
.append
工作方式。 .append("<a>")
actually immediately appends an end tag (in other words, it's equivalent to .append("<a></a>")
. You need to build an anchor tag containing the spans
and then append that to the li
that you end up returning: .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);
}
Example: http://jsfiddle.net/WP29E/145/ 示例: http : //jsfiddle.net/WP29E/145/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.