0

Railsアプリの検索機能にjqueryuiオートコンプリートウィジェットを正常に追加しましたが、正常に機能します:)。これが私のコードです

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ビューに追加されます。

しかし、first_name、last_name、user_nameだけでなく、user_imageも含めることでさらに追加したい

返された結果を使用して、JavaScript内から画像を取得しようとしました。

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

次に、user_name、first_nameなどと一緒に画像を追加しようとしました。

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

しかし、それはうまくいきませんでした...ため息

どういうわけかjsonに（コントローラーから）画像パスを追加して、それをjavascriptファイルに追加できるかどうか疑問に思っていました

plsヘルプ:(

4

2 に答える 2

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);
  };
});

user.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 に答える
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 に答える