在Rails 3.2.11中的jquery UI自动完成中显示图像

Question

我为用户提供了自动填充功能。

这是我的代码段：

$("input.autocomplete_user").autocomplete(
{
    // Autocomplete Source: Category json
    source: <%= raw User.select("distinct username as value, user_id as ID").where("username ILIKE ?", "%#{params[:term]}%").joins(:roles).all(conditions:{roles:{name: 'Creator'}}).to_json %>,
    minLength: 0,
    select: function (event, data) {
        $(this).autocomplete('disable');
        $("input.autocomplete_user_id").attr('value', data.item.id);
        var opval = $("input.autocomplete_user_id").val();
    }

})

我也希望展示用途的照片。就像这样：http://d.pr/i/mfJQ

你对此有什么想法吗？任何变通办法都将受到赞赏。

修改

实际上，我试过这个，但没有用。

$("input.autocomplete_user").autocomplete(
{
    // Autocomplete Source: Category json
    source: <%= raw User.select("distinct username as value, user_id as ID, photo_url as foto").where("username ILIKE ?", "%#{params[:term]}%").joins(:roles).all(conditions:{roles:{name: 'Creator'}}).to_json %>,
    minLength: 0,
    select: function (event, data) {
        $(this).autocomplete('disable');
        $("input.autocomplete_user_id").attr('value', data.item.id);
        var opval = $("input.autocomplete_user_id").val();
    }

})
.data("autocomplete")._renderItem = function(ul,item){
   return $("<li></li>")
  .data("item.autocomplete",item)
  .append("<a>"+"<img src='" + item.foto +"'>"  + item.first_name + " " + item.last_name + "<br>" + item.username  +  "</a>" )
  .appendTo(ul);
};