Question

我是Ror的新人，我想在我的products.search页面上显示我的所有产品卡可用，并添加一个algolia搜索栏过滤和显示结果卡，而不是此页面上的所有产品。我知道它并不难，但我不能成功地使它成功。我的algolia索引工作正常，因为我在Algolia网站上获得了所有产品。实际上我找不到放入控制器的好方法以及放在我视野中的好代码......： - （

谢谢你的帮助。这是我的代码：

app.js：

//= require algolia/v3/algoliasearch.min

ProductsController.rb：

  def search
    @products = Product.where(active: true)
???????
  end

Product.rb：

include AlgoliaSearch
algoliasearch if: :active? do
  attribute :name, :brand, :category, :color, :size, :price
end

产品/ search.html.erb：

<!-- Algolia searchbar -->
<!-- HTML Markup -->
<div class="aa-input-container" id="aa-input-container">
    <input type="search" id="aa-search-input" class="aa-input-search" placeholder="Trouver un article..." name="search" autocomplete="off" />
    <svg class="aa-input-icon" viewBox="XXXXXXXX">
        <path d="XXXXXXXXXX" />
    </svg>
</div>
<!-- Include AlgoliaSearch JS Client and autocomplete.js library -->
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>
<!-- Initialize autocomplete menu -->
<script>
var client = algoliasearch('XXXXX', 'XXXXXXXXXX');
var index = client.initIndex('Product');
//initialize autocomplete on search input (ID selector must match)
autocomplete('#aa-search-input',
{ hint: false }, {
    source: autocomplete.sources.hits(index, {hitsPerPage: 5}),
    //value to be displayed in input control after user's suggestion selection
    displayKey: 'name',
    //hash of templates used when rendering dataset
    templates: {
        //'suggestion' templating function used to render a single suggestion
        suggestion: function(suggestion) {
          return '<span>' +
            suggestion._highlightResult.name.value + '</span><span>' +
            suggestion._highlightResult.category.value + '</span>';
        }
    }
});
</script>

<div class="col-xs-12 col-md-9">
    <% @products.each do |product| %>
    <% if product.active? %>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading preview">

        </div>
        <div class="panel-body">
          <strong><%= link_to product.name, product %></strong>

          <strong><%= product.price %> euros</strong>
        </div>
      </div>
    </div>
    <% end %>
    <% end %>
  </div>

Answer 1

要在当前视图中显示Algolia，您可以依靠前端搜索，因此您可以删除控制器中的@products = Product.where(active: true)行以及视图中的循环。

那就是说，你的代码似乎是正确的。你的Algolia指数中有记录吗？如果没有，您可以使用Product.reindex!强制重建索引。

在产品视图中显示Algolia结果

1 个答案: