格式化即时搜索命中部分

Question

我正试图显示Algolia Instant Search中的热门部分，就像引导程序中的下拉项一样简单：

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

但是我只能得到这个：

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

seachbox的代码HTML：

<form class="form-inline md-form my-0 mr-5 text-white ">
<i class=“fas fa-search white-text” aria-hidden=“true”></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”></div>的内部

我猜有一个ul和li 您需要制作那些display: block 还有更多的CSS属性 可能white-space: pre;

可以为<div id=“hits”></div>提供内部html吗？这样我们可以提供更好的答案。