2
레일스와 자바 스크립트를 처음 사용했습니다. 필자는 solr의 흑점을 사용하여 데이터베이스에서 제품을 검색하는 레일상의 루비에 작은 애플리케이션을 개발했습니다. kaminari의 페이지 매김을 사용하여 내용을 표시했습니다. 그러나 이제 나는 그것을 없애고 대신 무한 스크롤을 사용하고 싶습니다. 나는 아래의 무한한 스크롤러를 언급하고있다. https://github.com/pklauzinski/jscroll 이것을 내 레일 앱에 통합하고 싶습니다. 내가 어떻게 해? 여기jScroll에서 무한 스크롤하기
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>
<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>