How to customize tag-it jQuery plugin: needs to add image for each found item

Question

I am using tag-it jQuery plugin. And now I need to customize each found item result: just add an image (user avatar) on the left side of the found item label.

I've included tag-it.js file and that's work fine besides an issue I've mentioned above.

Here is a snippet of my code:

$("#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,
    });

I undestood I can adjust tag-it.js file in order to add an image (user avatar) for each item, but I can't found place where I can do it. (I've already seen the same question)

Final result should be like this

Can anyone help me? Any efforts will be greatly appreciated. Thanks.

Answer 1

I've found the solution. Maybe this answer would helpful for somebody.

Main idea is to apply 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);
            });
        }
    });

Answer 2

Here's another Github project that addresses this issue, Image Select. It is built on Chosen, a very popular JQuery plugin,