jQuery 自动完成列表项图标答案

【问题标题】：jQuery autocomplete list item iconsjQuery 自动完成列表项图标
【发布时间】：2017-01-23 14:39:51
【问题描述】：

我正在使用 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”的右侧有一个很棒的字体图标

【问题讨论】：

标签： javascript jquery css autocomplete

【解决方案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);
        };

【讨论】：

【解决方案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 );
        },

【讨论】：