在jQuery UI自动完成结果中显示图标 [英] Display an icon in jQuery UI autocomplete results

问题描述

我正在使用 jQuery UI Autocomplete插件(版本1.8)，喜欢自定义建议的显示方式.具体来说，我不仅要显示一些文本，还要显示一个图标.但是，当我发送< img>标签，它只会在结果列表中显示为纯文本.

I'm using the jQuery UI Autocomplete plugin (version 1.8), and I'd like to customize the way the suggestions show up. Specifically, I want to display not only some text, but an icon as well. However, when I send the <img> tag, it just gets rendered as plain text in the results list.

有什么办法可以改变这种行为?另外，您是否可以建议其他方式将图像包含在返回的结果中，并将其显示在建议中?

Is there some way to change this behavior? Alternatively, can you suggest a different way to include images in the returned results and have them show up in the suggestions?

推荐答案

来自此处

$("#search_input").autocomplete({source: "/search",
                                 minLength: 3,
                                 select: function (event, ui) {
                                     document.location = ui.item.url;
                                 }
})
.data("autocomplete")._renderItem = function (ul, item) {
//As per recent documemtation above line should be 
//.autocomplete( "instance" )._renderItem = function (ul, item) {
    return $('<li class="ui-menu-item-with-icon"></li>')
        .data("item.autocomplete", item)
        .append('<a><span class="' + item.type + '-item-icon"></span>' + item.label + '</a>')
        .appendTo(ul);
};

和CSS:

.ui-menu .ui-menu-item-with-icon a {
  padding-left: 20px;
  
}
span.group-item-icon,
span.file-item-icon {
  display: inline-block;
  height: 16px;
  width: 16px;
  margin-left: -16px;
}
span.group-item-icon {
  background: url("/image/icons/group.png") no-repeat left 4px;
}
span.product-item-icon {
  background: url("/image/icons/product.png") no-repeat left 7px;
}

这篇关于在jQuery UI自动完成结果中显示图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！