文章/答案/技术大牛

发布

社区首页 >问答首页 >Algolia Instantsearch for rails无结果

问Algolia Instantsearch for rails无结果
EN

Stack Overflow用户

提问于 2018-01-18 01:14:21

回答 1查看 332关注 0票数 0

大家好，我是Ror和Js的新手，我想在我的应用程序上安装algolia Instantsearch，我的产品出现在algolia索引上，但我无法在我的html页面(产品索引)上显示我的即时搜索和结果。如果有人能帮助我，那就太好了:-)提前谢谢

下面是我的代码：

我包含的布局：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3/dist/instantsearch.min.css">

product.rb (型号)：

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

search.html.erb：

    <div>
       <input id="search-input" placeholder="Search for products">
       <!-- We use a specific placeholder in the input to guides users in their search. -->
    </div>
  </header>
  <main>
      <div id="hits"></div>
      <div id="pagination"></div>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3/dist/instantsearch.min.js"></script>
  <script src="app.js"></script>


  <script type="text/html" id="hit-template">
  <div class="hit">
    <div class="hit-image">
      <img src="{{image}}" alt="{{name}}">
    </div>
    <div class="hit-content">
      <h3 class="hit-price">${{price}}</h3>
      <h2 class="hit-name">{{{_highlightResult.name.value}}}</h2>
      <p class="hit-description">{{{_highlightResult.description.value}}}</p>
    </div>
  </div>
</script>

app.js：

var search = instantsearch({
  // Replace with your own values
  appId: "012967GRTQ",
  apiKey: "a3f100606d982f64d7c25410c672f5f5", // search only API key, no ADMIN key
  indexName: 'Product',
  urlSync: true,
  searchParameters: {
    hitsPerPage: 10
  }
});

search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#search-input'
  })
);

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      item: document.getElementById('hit-template').innerHTML,
      empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
    }
  })
);

search.addWidget(
  instantsearch.widgets.pagination({
    container: '#pagination'
  })
);

search.start();

config/initializers/algoliasearch.rb

require 'rubygems'
require 'algoliasearch'

Algolia.init application_id: "XXXXXX",
             api_key:        "xxxxxxxxxxxx"
index = Algolia::Index.new("Product")

我从.....github.com/algolia/examples/blob/master/instant-search/instantsearch.js/assets/style.css.....导入了css：

javascript

css

ruby-on-rails

algolia

回答 1

Stack Overflow用户

发布于 2018-01-19 00:01:25

以下资源来源：

GET http://localhost:3000/app.js 404 (Not Found)
GET http://localhost:3000/js/main.js 404 (Not Found)

这是我的布局：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>XXXXXXX</title>
  <%= csrf_meta_tags %>
  <%= action_cable_meta_tag %>
  <%= javascript_include_tag "https://js.stripe.com/v2/" %>
  <%= stylesheet_link_tag 'application', media: 'all' %>

<link rel="stylesheet" type="text/css" href="css/jTinder.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3/dist/instantsearch.min.css">

  <%= favicon_link_tag 'favicon.ico'%>
</head>

<body>
  <%= render 'shared/navbar' %>
  <%= render 'shared/message' %>
  <%= yield %>
  <%= javascript_include_tag "https://maps.google.com/maps/api/js?libraries=places&key=#{ENV['GOOGLE_API_BROWSER_KEY']}" %>
  <%= javascript_include_tag "https://cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/markerclusterer/src/markerclusterer_compiled.js" %>
  <%= javascript_include_tag "https://cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js" %>
  <%= javascript_include_tag 'application' %>
  <script type="text/javascript" src="autocomplete.js"></script>


    <script type="text/javascript" src="js/jquery.min.js"></script>
    <!-- transform2d lib -->
    <script type="text/javascript" src="js/jquery.transform2d.js"></script>
    <!-- jTinder lib -->
    <script type="text/javascript" src="js/jquery.jTinder.js"></script>
    <!-- jTinder initialization script -->
    <script type="text/javascript" src="js/main.js"></script>



  <%= yield(:after_js) %>
  <%= render 'pages/footer' %>

</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48306570

复制

相似问题

问Algolia Instantsearch for rails无结果
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Algolia Instantsearch for rails无结果EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Algolia Instantsearch for rails无结果
EN