索引的不同结果模板Instantsearch.js Algolia

时间:2018-10-07 07:11:17

标签: templates algolia

我想用两个不同的项目模板针对两个不同的索引来自定义我的阿尔戈利亚搜索结果,但是我不知道该怎么做。我也无法在文档中找到有关此事的信息。

在这里您可以看到我目前的工作方式。

        <script type="text/html" id="hit-template">
          <div class="hit">
            <div class="head">
              <span class="title">@{{{_highlightResult.title.value}}}</span>
              <span class="tag">@{{{_highlightResult.category.value}}}</span>
            </div>
            <div class="details">
              <span>@{{{ article_votes }}} @{{{ comment_votes }}} Points</span> &middot;
              <span>@{{{ username }}}</span> &middot;
              <span>@{{{ created_at }}}</span>
              <span class="domain">@{{{_highlightResult.link.value}}}</span>
            </div>
            <p class="comment-text">@{{{_highlightResult.body.value}}} 
           @{{{_highlightResult.description.value}}}</p>
          </div>
        </script>

    search.addWidget(
      instantsearch.widgets.hits({
        container: '#hits-container',
        templates: {
          empty: 'Sorry, there are no results.',
          // Here I need two item templates one for comments and one for articles
          item: document.getElementById('hit-template').innerHTML 
        },
        escapeHits: true,
        transformItems: items => items.map(item => item),
      })
    );

1 个答案:

答案 0 :(得分:1)

建议使用InstantSearch显示来自多个索引的匹配的方法是每个索引有一个instantsearch()实例。

例如,在您的用例中,您将有一个articles即时搜索和一个comments即时搜索,分别响应单个searchBox小部件。每个人也都有自己的hits小部件。

这是fiddle,显示来自多个索引的匹配以启发灵感。