CODEWITHSUNDEEP
javascripthtmlalgoliainstantsearch.jsinstantsearch
Paulo Cecilio
Paulo Cecilio

Reputation: 120

Formatting Instant Search Hits section

I’m trying to show a hit section from a Algolia Instant Search as simple as a dropdown-item from bootstrap:

enter image description here

one result per line as a <a> link, without images.

But I only get this one:

enter image description here

How can I get the dropdown-item (above) style , One item per line, without that borders and overlapping ?

Code HTML for seachbox:

<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>

Code 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>`;
        }
      }  
    })
    );

Upvotes: 1

Views: 801

Answers (1)

Arron McCrory
Arron McCrory

Reputation: 728

Without being able to see the inside of <div id=“hits”></div>

I am guessing there is a ul and li you need to make those display: block and a few more css properties probably white-space: pre;

Can you provide the inside html for <div id=“hits”></div>? so we can provide a better answer.

Upvotes: 1

Related Questions