0

我刚刚成功地将 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);
};

});

控制器动作

 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 视图中。

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

我尝试使用返回的结果从 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 中添加图像路径（来自我的控制器），然后将其附加到 javascript 文件中

请帮助:(

4

2 回答 2

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);
}
于 2013-03-07T05:41:08.707 回答
1

我尝试使用回形针为用户存储图像我得到了这个：

 jQuery(document).ready(function($) {
  $('#user_name').autocomplete({
   minLength: 1,
   source: "<%= users_path(:json) %>",

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

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

用户.rb

def self.search (search_name)
 return scoped unless search_name.present?
  where(['name LIKE ? or first_name LIKE ? or last_name LIKE ?', "%#{search_name}%", "%#{search_name}%",  "%#{search_name}%"])
end
def avatar_url
 self.avatar.url :thumb
end

users_controller.rb

def index
if params[:name]
  @users = User.search(params[:name])
else
  @users = User.all
end
respond_to do |format|
  format.html # index.html.erb
  format.json { render json: @users.as_json(only: [:first_name, :last_name, :name], methods: [:avatar_url] )}
end

结尾

这里是完整的代码：https ://github.com/senayar/autocompletion_image_paperclip

根据jvnill编辑

于 2013-03-06T19:33:00.657 回答