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

它本质上会产生一个站点搜索，其结果是直接链接。我想将本地存储的图像添加到结果中，以更好地模仿 facebook。在将用户引导至“自定义数据”演示之前，我运气不佳并看到了问题。这是一个这样的问题...

How do I add images to results of this JQueryUI autocomplete plugin?

我知道这个演示...

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

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

我真的非常讨厌 jQuery UI，因为它的文档记录得非常少，而且它又是多么不必要的复杂......所有的定制内容都在多个文件中，等等......我曾经使用 JÖRN ZAEFFERER 的插件，它接受简单的 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 规则应用于您添加的项目。

Here's a complete example它使用 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/