jquery - 如何自定义tag-it jQuery插件: needs to add image for each found item

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 文件以便为每个项目添加图像(用户头像)，但我找不到可以做到这一点的地方。 (我已经看过 the same question )

最终结果应该像 this

有人可以帮助我吗？任何努力都将受到高度赞赏。谢谢。

Answer 1

我已经找到解决办法了。也许这个答案对某人有帮助。

主要思想是申请monkeyPatchAutocomplete patch :

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