Как настроить tag-it Плагин jQuery: необходимо добавить изображение для каждого найденного элемента

Question

Я использую плагин jQuery tag-it. И теперь мне нужно настроить каждый найденный элемент: просто добавьте изображение (аватар пользователя) в левой части метки найденного элемента.

Я включил файл 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, 
    }); 

I undestood я могу настроить тег 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); 
      }); 
     } 
    }); 

Answer 2

Вот еще один проект Github, который решает эту проблему, Image Select. Он построен на Chosen, очень популярном плагине JQuery,