javascript - 将用户图像添加到 Rails 中的 jquery ui 自动完成中

Question

我刚刚成功将 jquery ui 自动完成小部件添加到我的 Rails 应用程序中的搜索功能，并且工作正常:)。这是我的代码

JavaScript

 <script type="text/javascript">
  jQuery(document).ready(function($) {

$('#search').autocomplete({
 minLength: 1,
 source: "<%= list_path(:json) %>",

 focus: function(event, ui){
   $('#search').val(ui.item.user_name);
   return false;
 },
 select: function(event, ui){
 $('#search').val(ui.item.user_name);
 return false;
 }
})

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

});

Controller 操作

 def list
 list = []
 @user = User.where("user_name LIKE ? or first_name LIKE ? or last_name LIKE ?",   "#{params[:term]}%" , "#{params[:term]}%" , "#{params[:term]}%")
@user.each{|user| list << user}

respond_to do |format|
format.json { render :json => list.to_json,:layout=>false }
end
end

基本上，在搜索框中输入每个字母后，JavaScript 就会调用该操作，然后将结果附加到 html View 中。

但我想添加更多内容，不仅包括名字、姓氏和用户名，还包括用户图像

我尝试使用返回的结果从 javascript 内部获取图像例如

   <script>
      .
      .
      .
     // somwhere inside my javascript code
     var id = item.id
   <% @image= UserImage.find(:first,:conditions=>["user_id=?",id]) %>
      .
      .
    </script>

然后我尝试将图像与用户名、名字等一起附加例如

         <script>
           .
           . 
           .
        .append("<a>"+ <%=image_tag(@image.image.url(:thumb))%> + " " + tem.first_name + " " + item.last_name + "<br>" + item.user_name + "</a>" )
         <script>

但是没用...唉

我想知道是否可以以某种方式添加 json 中的图像路径(从我的 Controller )，然后将其附加到 javascript 文件中

请帮忙:(

Answer 1

您必须更改几个文件

# controller
def list
  @users = User.where("user_name LIKE :q or first_name LIKE :q or last_name LIKE :q", { q: "#{params[:term]}%")

  respond_to do |format|
    format.json { render json: @users.as_json(only: [:first_name, :last_name, :user_name], methods: [:avatar_url] }
  end
end

# user.rb
def avatar_url
  user_image.image.url :thumb
end

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