Question

我正在使用jQuery自动完成功能，我想在自动完成源的所有列表项的右侧添加一个字体真棒图标。

到目前为止，我找到的解决方案是设置每个列表项的背景，但我希望使用font-awesome图标来监听点击事件，这对我没有帮助。

这是我的代码：

            var data = ["a", "b", "c"];

            $(this).autocomplete({
                source: data,
                open: function(event, ui) {
                    $(this).autocomplete("widget").css({
                        "width": $(this).parent().width()
                    });
                }
            });

在这种情况下，我想在“a”，“b”和“c”的右侧有一个字体真棒图标

Answer 1

以下代码为我解决了这个问题：

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

Answer 2

您可以使用另一种简单的方法在自动完成列表项之前添加图像或超棒的图标。第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 );
        },

jQuery自动完成列表项目图标

2 个答案: