显示搜索结果时呈现标题答案

【问题标题】：Render a headline when search results are displayed显示搜索结果时呈现标题
【发布时间】：2018-10-25 15:55:10
【问题描述】：

我没有找到在搜索结果前输出标题（搜索结果：）的方法，该标题仅在显示结果时可见。

每次都有它（命中项模板的一部分）不会有问题，但如果显示空结果模板，我不需要它。

什么是好的解决方案？

这是我当前的点击小部件配置：

this.search.addWidget(
  this.algoliaInstantSearch.widgets.hits({
    container: '.js-algolia-hits',
    escapeHits: true,
    templates: {
      item: document.querySelector('.js-algolia-hit-item-template').innerHTML,
      empty: window.algoliaEmptyResultsText
    },
    cssClasses: {
      root: 'c-search__hits-list',
      empty: 'c-search__hits-empty',
      item: 'c-search__hits-list-item'
    }
  })
);

【问题讨论】：

标签： algolia instantsearch.js

【解决方案1】：

您可以使用allItems 模板选项来完全控制点击的呈现。

search.addWidget(
  instantsearch.widgets.hits({
    container: document.querySelector("#products"),
    templates: {
      allItems: function({ hits }) {
        // No results message
        if (hits.length === 0) return "";

        const hitsMarkup = hits
          .map(
            hit =>
              `<div class="ais-hits--item">${
                hit._highlightResult.name.value
              }</div>`
          )
          .join("");

        return `
          <div>
            <h1>Search Results:</h1>
            <div class="ais-hits--container">${hitsMarkup}</div>
          </div>
        `;
      }
    }
  })
);

你可以在这里看到结果：https://codesandbox.io/s/8zxxvo84wl

【讨论】：