jquery-ui-autocomplete – 在jQuery UI自动填充结果中显示图标

前端之家收集整理的这篇文章主要介绍了jquery-ui-autocomplete – 在jQuery UI自动填充结果中显示图标前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用 jQuery UI Autocomplete plugin(版本1.8),我想自定义建议的方式.具体来说,我不仅要显示一些文字,还要显示一个图标.但是,当我发送< img>标签,它只是在结果列表中作为纯文本呈现.

有没有办法改变这种行为?或者,您可以建议使用不同的方式在返回的结果中包含图像,并将其显示在建议中?

解决方法

取自 here
$("#search_input").autocomplete({source: "/search",minLength: 3,select: function (event,ui) {
                                     document.location = ui.item.url;
                                 }
})
.data("autocomplete")._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;
}
原文链接:https://www.f2er.com/jquery/176322.html

猜你在找的jQuery相关文章