2014-01-30 34 views
2

我是Rails和javascript的新手。我在rails上开发了一个小型应用程序,它使用solr的太阳黑子在数据库中搜索产品。我曾经使用kaminari的分页显示内容。但是现在我想把它关掉,并使用无限滚动。我指的是下面的无限滚动。 https://github.com/pklauzinski/jscroll 我想将它集成到我的rails应用程序中。我该怎么做? 这里是我的控制器代码:jScroll for Rails无限滚动

   def show 

        if params[:name].nil? 
        @search = [] 
        else 
        @search = Sunspot.search(Clothes) do 
        fulltext params[:name] 
        paginate :page => params[:page], :per_page => 24 
        order_by :maxprice 
        end 


        @results = @search.results 
        end 
       flash[:alert] = "Enter something!" 
       end 

       def autocomplete 
       list=[] 
       @res = Clothes.search do 
       fulltext params[:term] 
       paginate :page => 1, :per_page => 100 
       order_by :maxprice 
       end 
       @rest = @res.results 
       @rest.each do |brand| 
       list << {"label"=>brand.name, "value"=>brand.name, "id"=>brand.id} 
       end 
       respond_to do |format| 
       format.json{render :json=>list.to_json, :layout=>false} 
       end 
       end 
      end 

这是我的看法代码:

   <div id="container"> 

      <% for prod in @results %> 
      <div class="product"> 
      <div class="image"><%= image_tag(prod.image, :alt => "logo", :size => "75x75") %> </div> 
       <div class="name"><h3> <%= prod.name %> </h3></div> 
       <div class="price"><h5>Old Price:</h5><%= prod.maxprice%></div><div class="price"> <h5>New Price:</h5><%= (prod.maxprice)-(prod.maxprice * prod.discount/100) %></div>  
      </div> 
      <% end %> 
      <% else %> 
       <div class="notice"><%= flash[:alert] %></div> 

       <% end %> 
      </div> 

也为我自动完成和处理我的AJAX脚本代码。

     <script> 
        $(document).ready(function() { 
        $.ajax({ 
        url : "shirts/first", 
        type : "GET" 
        }); 
       $("#name").autocomplete({ 
       source : "shirts/autocomplete", 
       autoFocus : false, 
       minLength : 1, 
       select : function(event, ui) { 
       document.getElementById("name").value = ui.item.value; 
      $.ajax({ 
      url : "shirts/show?name=" + ui.item.value, 
      type : "GET" 
      }); 
      } 
       }); 
        }); 
        </script> 

回答