jQuery UI - 格式化自动完成结果。可以添加图片吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6070142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI - Formatting the autocomplete results. Add image possible?
提问by martok
We're moving from the bassistance.de autocompleteto jQuery UI autocomplete. I can't find as many examples for the jQuery UI version, the documentation seems a little sparse. That could just be me.
我们正在从bassistance.de 自动完成转向 jQuery UI 自动完成。我找不到 jQuery UI 版本的许多示例，文档似乎有点稀疏。那可能只是我。
I'd like to know if anyone has an example/tutorial which explains how to alter the look and feel of the autocomplete drop down. My code is as follows:
我想知道是否有人有一个示例/教程来解释如何更改自动完成下拉菜单的外观和感觉。我的代码如下：
$( "#SearchInput" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://servername/index.pl",
dataType: "json",
data: {
term: request.term
},
success: function( data ) {
response( $.map( data.items, function( item ) {
return {
label: item.id + " - " + item.label,
value: item.id
}
}));
}
});
},
});
This works, I get the ID and Label displayed seperated by a hyphen. Ideally I'd like to know how to format how the results are displayed. I'd like the ID then below the ID the label. If possible I'd like to know how to display an image to the right of the text.
这有效，我得到了用连字符分隔显示的 ID 和标签。理想情况下，我想知道如何格式化结果的显示方式。我想要 ID，然后在 ID 下方是标签。如果可能，我想知道如何在文本右侧显示图像。
If anyone has any pointers on how to achieve this I'd be greatful.
如果有人对如何实现这一点有任何指示，我会很高兴。
回答by Yman
There is some documentation on JqueryUI website on how to customize the result layout: http://jqueryui.com/demos/autocomplete/#custom-data.
JqueryUI 网站上有一些关于如何自定义结果布局的文档：http: //jqueryui.com/demos/autocomplete/#custom-data。
Some example:
一些例子：
$( "#SearchInput" ).autocomplete({ .... }).data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + "<img src='" + item.imgsrc + "' />" + item.id+ " - " + item.label+ "</a>" )
.appendTo( ul );
};
