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

Question

我正在编码一个小的应用程序与搜索，使用户能够找到产品。用户可以按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')%>");
});

当我在控制台中调试时，@products总是以正确的顺序给我一个包含我想要的东西的数组，所以看起来后端逻辑是正确的。但每次我搜索某个内容或激活一个过滤器时，呈现的输出都不正确:有关正确实例(实际在@products数组中的实例)的信息显示两次，同时显示的还有其他不在@products中的产品。我不明白为什么会发生这种事。

Answer 1

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

例如：

$('#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