Jquery UI 自动完成 - 结果叠加中的图像，而不是像演示那样在外面 [英] Jquery UI autocomplete - images IN the results overlay, not outside like the demo

问题描述

我有用于自动完成的 jQueryUI 代码......

I have jQueryUI code for autocompleting that follows....

$(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.在将用户引导到自定义数据"演示之前，我运气不好，也看到了问题.这是一个这样的问题...

And it essentially produces a site search where the results are direct links. I would like to add images that are stored locally to the results to greater imitate facebook. I've had no luck and seen questions before directing users to the "custom data" demo. Here is one such question...

如何添加图片这个 JQueryUI 自动完成插件的结果?

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

I'm aware or this demo...

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

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

..but there is NO guidance as to how one would go about do this IN DETAIL about formatting the results overlay itself / putting images IN the overlay. I'm realy at a loss here. I've dissected this demo all day with nothing to show for it. This should be easy because all the data and images are local. They're all in the same folder as this search. There's no PHP or database stuff to deal with here.....

我真的，真的很讨厌 jQuery UI，因为它的文档记录很差，而且它有多么不必要的复杂......所有的自定义内容都在多个文件中，等等......我曾经使用 JÖRN ZAEFFERER 的插件接受简单的 HTML 标签.它一直工作到 IE8......

I really, truly hate jQuery UI because of how poorly documented it is, and how unnecessarily complicated it is.... All the customization stuff is in multiple files, etc.... I used to use JÖRN ZAEFFERER's plugin which accepted simple HTML tags. It worked just fine until IE8......

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

Any insights into this are greatly, greatly appreciated.

推荐答案

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

The recommended way to change the display of list items in the suggestion list for autocomplete is to override the _renderItem method. Inside this method you must do several things:

1. 向传入的ul 附加一个li.li 必须包含一个 a 标签.
2. 将正确的数据与该 li
相关联
3. 返回那个li.

1. Append an li to the passed in ul. The li must include an a tag.
2. Associate the proper data with that li
3. Return that li.

除此之外，您还可以执行任何您喜欢的自定义格式逻辑.以下是我将如何更新您的代码:

Apart from this, you can perform any custom formatting logic you'd like. Here's how I would update your code:

$("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 规则应用于您添加的项目.

As you can see, adding an img tag was as easy as placing it inside of the a tag mentioned above. Keep in mind you can also apply CSS rules to items that you add as well.

这是一个完整的例子，它使用 StackOverflow 的 API 来搜索用户，以及在他们的左边显示他们的头像.

Here's a complete example that uses StackOverflow's API for searching users, and shows their avatars to the left of them.

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

Update: As of jQueryUI 1.10, you need to access widget data for autocomplete using .data("uiAutocomplete") (thanks for noticing the problem @Danny). With that in mind, here's an example working in 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/

这篇关于Jquery UI 自动完成 - 结果叠加中的图像，而不是像演示那样在外面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！