$(function() {
var updates = [
{ value: "URL",label: "some text",icon: "jqueryui_32x32.png"};
];
$("input#autocomplete").autocomplete({
delay: 10,minLength: 0,source: updates,select: function( event,ui ) {
window.location.href = ui.item.value;
}
});
});
它主要产生一个站点搜索,其结果是直接链接.我想在结果中添加本地存储的图像,以更好地模仿脸书.在将用户引导到“自定义数据”演示之前,我没有运气和看过问题.这是一个这样的问题……
How do I add images to results of this JQueryUI autocomplete plugin?
我知道或者这个演示……
http://jqueryui.com/demos/autocomplete/#custom-data
..但没有关于如何进行此操作的指导.详细说明格式化结果叠加本身/将图像放入叠加层.我真的很茫然.我整天都在解剖这个演示,没有任何东西可以展示.这应该很容易,因为所有数据和图像都是本地的.它们与此搜索位于同一文件夹中.这里没有PHP或数据库的东西来处理…..
我真的非常讨厌jQuery UI,因为它的文档记录很差,而且它有多么复杂……所有的自定义内容都在多个文件中等等….我曾经使用JÖRNZAEFFERER的插件接受了简单的HTML标签.它工作得很好直到IE8 ……
任何对此的见解都非常感谢.
解决方法
>将li附加到传入的ul中. li必须包含一个标签.
>将正确的数据与li相关联
>回报李.
除此之外,您还可以执行任何自定义格式逻辑.以下是我更新代码的方法：
$("input#autocomplete").autocomplete({
delay: 10,ui ) {
window.location.href = ui.item.value;
}
}).data("autocomplete")._renderItem = function (ul,item) {
return $("<li />")
.data("item.autocomplete",item)
.append("<a><img src='" + item.icon + "' />" + item.label + "</a>")
.appendTo(ul);
};
如您所见,添加img标记就像将其放在上面提到的标记内一样简单.请记住,您也可以将CSS规则应用于您添加的项目.
Here’s a complete example使用StackOverflow的API搜索用户,并在其左侧显示他们的头像.
更新：从jQueryUI 1.10开始,您需要使用.data(“uiAutocomplete”)访问小部件数据以进行自动完成(感谢您注意问题@Danny).考虑到这一点,这是一个在1.10中工作的示例：
$("input#autocomplete").autocomplete({
delay: 10,ui ) {
window.location.href = ui.item.value;
}
}).data("uiAutocomplete")._renderItem = function (ul,item)
.append("<a><img src='" + item.icon + "' />" + item.label + "</a>")
.appendTo(ul);
};
