如何在Algolia搜索结果展示时仅显示‘搜索结果：’标题？

针对你遇到的这个问题，我整理了两个靠谱的解决思路，都是适配当前Algolia InstantSearch的配置场景：

方法一：利用Hits组件的root模板实现条件渲染 #

这是最贴合组件原生逻辑的方式，通过自定义root模板，我们可以根据搜索结果的数量来决定是否渲染标题。你只需要修改Hits组件的templates配置，添加root模板内容：

this.search.addWidget( 
  this.algoliaInstantSearch.widgets.hits({ 
    container: '.js-algolia-hits', 
    escapeHits: true, 
    templates: { 
      // 新增root模板，实现条件渲染标题
      root: `{{#hits.length}}
        <h3>搜索结果：</h3>
        <div class="c-search__hits-list">
          {{#hits}}
            {{> item}}
          {{/hits}}
        </div>
      {{/hits.length}}
      {{^hits.length}}
        <div class="c-search__hits-empty">{{empty}}</div>
      {{/hits.length}}`,
      item: document.querySelector('.js-algolia-hit-item-template').innerHTML, 
      empty: window.algoliaEmptyResultsText 
    }, 
    cssClasses: { 
      // 这里注意：root类现在对应外层容器，原来的列表类已经写在root模板里了
      root: 'c-search__hits-container', 
      empty: 'c-search__hits-empty', 
      item: 'c-search__hits-list-item' 
    } 
  }) 
);

原理说明：

• 模板里的{{#hits.length}}是Handlebars的条件语法，当搜索结果数组长度大于0时，渲染标题和结果列表
• {{^hits.length}}则是反向条件，没有结果时渲染空状态内容
• 记得调整cssClasses.root的类名，因为原来的c-search__hits-list已经被移到root模板内部了

方法二：监听搜索渲染事件，手动控制标题显示 #

如果不想修改模板结构，也可以通过监听InstantSearch的render事件，动态控制标题元素的显示/隐藏：

第一步：在HTML中添加标题元素（默认隐藏） #

<h3 class="search-results-title" style="display: none;">搜索结果：</h3>
<!-- 你的搜索结果容器 -->
<div class="js-algolia-hits"></div>

第二步：在JS中添加事件监听 #

// 先初始化你的Hits组件（保持原有配置不变）
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' 
    } 
  }) 
);

// 监听render事件，控制标题显示
this.search.on('render', () => {
  // 获取最新的搜索结果
  const latestResults = this.search.helper.lastResults;
  const titleElement = document.querySelector('.search-results-title');
  
  if (latestResults && latestResults.hits.length > 0) {
    titleElement.style.display = 'block'; // 有结果时显示标题
  } else {
    titleElement.style.display = 'none'; // 无结果时隐藏
  }
});

原理说明：

• InstantSearch每次完成搜索渲染后都会触发render事件
• 通过this.search.helper.lastResults可以拿到最新的搜索结果数据
• 根据结果数组的长度，动态修改标题元素的display属性

这两种方法都能完美实现你要的效果：只有当搜索结果存在时，才显示“搜索结果：”标题，空结果时自动隐藏。

内容的提问来源于stack exchange，提问作者rzschoch