javascript - jQuery 自动完成列表项图标

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