在显示搜索结果时呈现标题

Question

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

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

什么是好的解决方案？

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

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'
    }
  })
);

Answer 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

在显示搜索结果时呈现标题

Render a headline when search results are displayed

algolia

instantsearch.js