jQuery自动完成列表项图标
jQuery自动完成列表项图标
提问于 2016-09-15 14:11:35
我使用的是jQuery autocomplete，我想在autocomplete源中所有列表项的右侧添加一个令人敬畏的字体图标。
到目前为止，我找到的解决方案是设置每个列表项的背景，但我想让字体可怕的图标侦听单击事件，所以这对我没有帮助。
这是我的代码：
var data = ["a", "b", "c"];
$(this).autocomplete({
source: data,
open: function(event, ui) {
$(this).autocomplete("widget").css({
"width": $(this).parent().width()
});
}
});在这种情况下，我希望在"a"，"b“和"c”的右边有一个非常棒的字体图标。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-09-17 12:26:56
下面的代码为我解决了这个问题：
var data = ["a", "b", "c"];
$(this).autocomplete({
source: data,
open: function(event, ui) {
$(this).autocomplete("widget").css({
"width": $(this).parent().width()
});
}
}).autocomplete("instance")._renderItem = function(ul, item) {
return $("<li>")
.append("<div>" + item.label + "<span style='float: right'><i class='fa fa-trash'></i></span></div>")
.appendTo(ul);
};Stack Overflow用户
发布于 2020-03-21 13:27:33
您可以使用另一种简单的方法在自动完成列表项之前添加一个图像或字体-令人惊叹的图标。步骤1-打开jquery.ui.js文件步骤2-替换以下代码
_renderItem: function( ul, item ) {
return $( "<li>" )
.append( $( "<div>" ).text( item.label ) )
.appendTo( ul );
},
to
_renderItem: function( ul, item ) {
return $( "<li>" )
.append( $( "<div>" ).html(item.label+"<span style='float: right'><img src='images/trash.png'></span>" ))
.appendTo( ul );
},
or
_renderItem: function( ul, item ) {
return $( "<li>" )
.append( $( "<div>" ).html( item.label+"<span style='float: right'><i class='fa fa-trash'></i></span>" ) )
.appendTo( ul );
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39513330
复制相关文章
相似问题
腾讯云开发者
