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

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

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

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

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

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

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

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

Answer 1

更改自动填充建议列表中列表项显示的推荐方法是覆盖_renderItem方法。在这个方法中你必须做几件事：

在传递的li中附加ul。 li必须包含a代码。
将正确的数据与li
返回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/

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

1 个答案: