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/