Jquery UI自动完成 - 图像在结果叠加层中,而不是像演示一样在外面

Question

我有自动填充的jQueryUI代码如下....

$(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;
        }
    });
});

它主要产生一个网站搜索,其结果是直接链接.我想添加本地存储到结果的图像,以更好地模仿脸书.在将用户引导到"自定义数据"演示之前,我没有运气和看过问题.这是一个这样的问题......

如何将图像添加到此JQueryUI自动完成插件的结果中？

我知道或者这个演示......

http://jqueryui.com/demos/autocomplete/#custom-data

..但是没有关于如何进行此操作的指导.详细说明格式化结果叠加本身/将图像放入叠加层.我真的很茫然.我整天都解剖了这个演示,没有任何东西可以展示.这应该很容易,因为所有数据和图像都是本地的.它们都与此搜索位于同一文件夹中.这里没有PHP或数据库的东西来处理.....

我真的非常讨厌jQuery UI,因为它的文档记录很差,而且它有多么复杂......所有的自定义内容都在多个文件中等等....我曾经使用JÖRNZAEFFERER的插件接受了简单的HTML标签.它工作得很好直到IE8 ......

对此有任何见解都非常感谢.

Answer 1

更改自动完成建议列表中列表项显示的推荐方法是覆盖该_renderItem方法.在这个方法中你必须做几件事:

1. 附加li到传入ul.在li必须包括一个a标签.
2. 将适当的数据与之关联起来 li
3. 归还那个li.

除此之外,您还可以执行任何自定义格式逻辑.以下是我更新代码的方法:

$("input#autocomplete").autocomplete({
    delay: 10,
    minLength: 0,                                          
    source: updates,        
    select: function( event, 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标记就像放在a上面提到的标记内一样简单.请记住,您也可以将CSS规则应用于您添加的项目.

这是一个完整的示例,它使用StackOverflow的API搜索用户,并在其左侧显示他们的头像.

更新:从jQueryUI 1.10开始,您需要使用自动填充访问窗口小部件数据.data("uiAutocomplete")(感谢注意问题@Danny).考虑到这一点,这是一个在1.10中工作的示例:

$("input#autocomplete").autocomplete({
    delay: 10,
    minLength: 0,                                          
    source: updates,        
    select: function( event, ui ) {
        window.location.href = ui.item.value;
    }
}).data("uiAutocomplete")._renderItem = function (ul, item) {
        return $("<li />")
            .data("item.autocomplete", item)
            .append("<a><img src='" + item.icon + "' />" + item.label + "</a>")
            .appendTo(ul);
}; 

示例: http ://jsfiddle.net/K5q5U/249/