如何解决Algolia搜索结果无法正确填充表格的问题

我希望使用Algolia搜索结果填充表格，现有如下HTML代码：

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Product</th>
      <th>quantity</th>
      <th>Status</th>
      <th>Phone</th>
      <th>Fax</th>
    </tr>
  </thead>
  <tbody id="hits">
  </tbody>
</table>
<script type="text/html" id="hit-template">
  <tr id="hit">
    <td>
      <div class="round-img">
        <a href=""><img src="images/avatar/4.jpg" alt=""></a>
      </div>
    </td>
    <td>${{VendorName}}</td>
    <td><span>iBook</span></td>
    <td><span>456 pcs</span></td>
    <td><span class="badge badge-success">Done</span></td>
    <td><span>${{Active}}</span></td>
    <td><span>${{Vendortype}}</span></td>
  </tr>
</script>

以及如下JS脚本：

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      item: document.getElementById('hit-template').innerHTML,
      empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
    }
  })
);
search.start();

目前搜索功能可正常运行，但表格无法被正确填充，请问我操作中的错误是什么？该如何修复以实现表格的正确填充？

核心错误原因 #

Algolia的hits组件默认会给每个搜索结果item外层包裹一个<div class="ais-Hits-item">元素，但表格的<tbody>只能直接嵌套<tr>标签，额外的外层<div>会破坏表格的HTML结构，导致浏览器无法识别表格行，自然就无法正确渲染表格。

修复步骤 #

1. 移除Hits组件默认的外层容器

在你的JS代码中，给hits组件添加cssClasses配置，将item对应的类设置为空，让组件不再自动生成外层包裹的div：

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits',
    cssClasses: {
      item: '' // 取消默认的外层div容器
    },
    templates: {
      item: document.getElementById('hit-template').innerHTML,
      empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
    }
  })
);
search.start();

2. 优化模板变量语法（可选但推荐）

你模板里用了${{VendorName}}这种双大括号嵌套的写法，Algolia默认使用的Mustache模板引擎只需要单大括号即可，建议修改成标准写法，同时去掉<tr>上重复的id="hit"（多个结果会生成重复ID，违反HTML规范）：

<script type="text/html" id="hit-template">
  <tr>
    <td>
      <div class="round-img">
        <a href=""><img src="images/avatar/4.jpg" alt=""></a>
      </div>
    </td>
    <td>{{VendorName}}</td>
    <td><span>iBook</span></td>
    <td><span>456 pcs</span></td>
    <td><span class="badge badge-success">Done</span></td>
    <td><span>{{Active}}</span></td>
    <td><span>{{Vendortype}}</span></td>
  </tr>
</script>

3. 验证最终结构

修改完成后，Algolia会直接把每个搜索结果对应的<tr>标签插入到<tbody id="hits">中，没有额外的干扰元素，表格就能正常渲染出搜索结果了。

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