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

显示搜索结果时呈现标题

1 个答案: