jquery - 如何自定义 tag-it jQuery 插件：需要为每个找到的项目添加图像

Question

我正在使用tag-it jQuery 插件。现在我需要自定义每个找到的项目结果：只需在找到的项目标签的左侧添加一个图像（用户头像）。

我已经包含了 tag-it.js 文件，除了我上面提到的问题之外，它工作正常。

这是我的代码片段：

$("#searchForUsersAutocomplete").tagit({
        tagSource: function(search, showChoices) {
            findUsers(search.term, function(jsonFoundUsers, status)//externall API-call which returns list of users as Objects (jsonFoundUsers)
            {
                var users = new Array();
                for (var i = 0; i < jsonFoundUsers.users.length; i++)
                {
                  //users.push(jsonFoundUsers.users[i].userAvatar);//contain an image (user avatar). Where can I place it in order to render in autocomplete search result? 
                  users.push(jsonFoundUsers.users[i].username);//populating users array which consists of "username" of each users
                }

                showChoices(users);
            });
        },
        removeConfirmation: true,
    });

我不明白我可以调整 tag-it.js 文件以便为每个项目添加图像（用户头像），但我找不到可以执行此操作的地方。（我已经看到了同样的问题）

最终结果应该是这样的

谁能帮我？任何努力将不胜感激。谢谢。

Answer 1

我找到了解决方案。也许这个答案会对某人有所帮助。

主要思想是应用monkeyPatchAutocomplete 补丁：

monkeyPatchAutocomplete();

    function monkeyPatchAutocomplete()
    {
        $.ui.autocomplete.prototype._renderItem = function(ul, item) {
            var regexp = new RegExp(this.term);
            var highlightedVal = item.label.replace(regexp, "<span style='font-weight:bold;color:Blue;'>" + this.term + "</span>");
            return $("<li'></li>")
                    .data("item.autocomplete", item)
                    .append("<a><img class='autocompleteUserAvatar' src='" + item.icon + "' />" + highlightedVal + "</a>")
                    .appendTo(ul);
        };
    }
    var users;
    $("#searchForUsersAutocomplete").tagit({
        allowDuplicates: false,
        removeConfirmation: true,
        tagSource: function(search, showChoices) {
            findUsers(search.term, function(jsonFoundUsers, status)//ajax-call to an externall server API
            {
                users = new Array();
                for (var i = 0; i < jsonFoundUsers.users.length; i++)
                {
                    var user =
                            {
                                value: jsonFoundUsers.users[i].username,
                                label: jsonFoundUsers.users[i].username,
                                icon: jsonFoundUsers.users[i].avatarUrl
                            };
                    users.push(user);
                }
                showChoices(users);
            });
        }
    });

Answer 2

这是另一个解决此问题的 Github 项目Image Select。它建立在Chosen上，一个非常流行的 JQuery 插件，