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

问题描述

我有jQueryUI的code为自动填入下面....

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...

<一个href=\"http://stackoverflow.com/questions/7265765/how-do-i-add-images-to-results-of-this-jqueryui-autocomplete-plugin\">How我图像添加到结果这个jQueryUI的自动完成插件？

我知道或本演示...

I'm aware or this demo...

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

..但没有指导，怎么一会去这样做详细介绍一下格式化结果覆盖本身/把图像叠加IN。我真的在这里损失。我已经解剖这个演示整天无所事事，显示它。因为所有的数据和图像，本地，这应该是很容易。他们都是在同一文件夹作为该搜索。有没有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的，因为它是多么糟糕记录，这是多么不必要的复杂....所有定制的东西是在多个文件中，等....我用乔恩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......

任何见解这个是很大，很大的AP preciated。

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 传递。在里必须包括一个 A 标记。


2. 与关联正确的数据里


3. 返回了里。

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.

除此之外，您可以执行任何你想自定义格式的逻辑。以下是我会更新code：

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.

下面是一个完整的例子 使用计算器的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，您需要使用。数据（uiAutocomplete）（感谢访问部件数据自动完成的察觉问题<一href=\"http://stackoverflow.com/questions/7885431/jquery-ui-autocomplete-images-in-the-results-overlay-not-outside-like-the-dem/7896744?noredirect=1#comment22452787_7896744\">@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用户界面自动完成 - 在结果叠加图像，而不是像外界演示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！