在rails中即时搜索不会显示正确的输出

时间:2015-10-12 16:46:26

标签: ruby-on-rails ajax search

我正在使用搜索功能对用户进行编码,以便用户查找产品。用户可以按name查找产品,并可以按price& weight(输出是按价格或重量降序排列的产品列表)。我在我的产品型号上使用gem pg-search

class Product < ActiveRecord::Base
  include PgSearch
  pg_search_scope :search,
  :against => [:name],
  :using => {:tsearch => {:prefix => true} }

这是我在ProductController中的索引方法:

def index
    if params[:content].present? && (params[:price] == "1")
      @products = Product.search(params[:content]).order(price: :desc)
      respond_to do |format|
        format.js {}
        format.html{ render :index }
      end
    elsif params[:content].present? && (params[:weight] == "1")
      @products = Product.search(params[:content]).order(weight: :desc)
      respond_to do |format|
        format.js {}
        format.html{ render :index }
      end
    elsif params[:content].present?
      @products = Product.search(params[:content])
      respond_to do |format|
        format.js {}
        format.html{ render :index }
      end
    elsif params[:price] == "1"
      @products = Product.all.order(price: :desc)
      respond_to do |format|
        format.js {}
        format.html{ render :index }
      end
    elsif params[:weight] == "1"
      @products = Product.all.order(weight: :desc)
      # binding.pry
      respond_to do |format|
        format.js {}
        format.html{ render :index }
      end
    else
      @products = Product.all
      # binding.pry
    end
  end

这是呈现产品搜索结果的部分:

<div id="js-product-row">
  <%if @products.empty?%>
    <p>
      <strong>Il n'y a pas encore de produit sur le site</strong>
    </p>
 <%else%>
    <% @products.each do |product| %>
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="container-fluid">
             <div class="row">
              <div class="col-md-2">
                <%= image_tag product.picture.url(:medium)%>
              </div>
              <div class="col-md-offset-3 col-md-3">
                <p><strong>
                  <%= product.description %>
                </strong></p>
              </div>
              <div class="col-md-4">
                <strong>
                  <%= product.price %> €
                </strong>
                <strong>
                  <%= product.weight %> Kg
                </strong>
                <div>
                  <%= link_to "En savoir plus", product_path(product) %>
                </div>
              </div>
            </div>
          </div>
         </div>
      </div>
    </div>
  <% end -%>
<% end -%>

这是用于在不重新加载页面的情况下更新视图的js文件:

$(document).ready(function(){
  $('#js-product-row').html("<%= escape_javascript(render 'products')%>");
});

当我在控制台中调试时,@ product总是以正确的顺序给我一个完全符合我想要的数组,所以似乎后端逻辑没问题。但是每当我搜索某些东西或者我激活过滤器时,渲染的输出都是正确的:有关正确实例的信息(实际在@products数组中的那个)显示两次,与其他产品一起显示不在@products。我不明白为什么会这样。

1 个答案:

答案 0 :(得分:0)

尝试使用.replaceWith而不是.html,否则从部分删除<div id="js-product-row">

e.g:

$('#js-product-row').replaceWith("<%= j(render 'products') %>");

我猜测的是你有

<div id="js-product-row">
...
</div>

然后你搜索哪个像这样添加html:

<div id="js-product-row">
   <div id="js-product-row">
    ...
   </div>
 </div>

再次跑步会产生类似的结果(例如双重结果):

 <div id="js-product-row">
   <div id="js-product-row">
    ...
   </div>
   <div id="js-product-row">
    ...
   </div>
 </div>

奖金更新:

作为旁注,你可以这样干你的控制器(不要重复自己):

def index
  @products = Product
  if params[:content].present?
    @products = @products.search(params[:content])
  end
  if params[:price] == "1"
    @products = @products.order(price: :desc)
  elsif params[:weight] == "1"
    @products = @products.order(weight: :desc)
  end
  @products = @products.all
  format.js
  format.html
end