javascript - 格式化即时搜索命中部分

Question

我正在尝试显示 Algolia Instant Search 中的热门部分，就像 bootstrap 中的下拉项一样简单：

每行一个结果作为<a>链接，没有图像。

但我只得到这个：

如何获得下拉项目（上图）样式，每行一个项目，没有边框和重叠？

搜索框的代码 HTML：

<form class="form-inline md-form my-0 mr-5 text-white ">
<i class=“fas fa-search white-text” aria-hidden=“true”&gt;</i>
<div id=“searchbox” class="text-white "></div>
<div id=“hits” class=“dropdown-menu text-white” ></div>
</form>

代码 JS：

search.addWidget(
instantsearch.widgets.searchBox({
container: “#searchbox”,
placeholder: “Search”,
showSubmit: false,
autofocus: false
})
);

  search.addWidget(
    instantsearch.widgets.hits({
      container: "#hits",
      templates: {
        empty: "None.",
        item: function(item) {
           return `<a class="dropdown-item" href="/question/${item.id_question}">${item.str_question}</a>`;
        }
      }  
    })
    );

Answer 1

无法看到内部<div id=“hits”&gt;</div>

我猜有一个ul，li 你可能需要制作这些display: block 和更多的 css 属性white-space: pre;

你能提供里面的html<div id=“hits”&gt;</div>吗？所以我们可以提供更好的答案。