0

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>`;
        }
      }  
    })
    );
Paulo
  • 100
  • 1
  • 12

1 Answers1

1

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.

Arron McCrory
  • 690
  • 7
  • 15
  • There is nothing inside
    . It exists only to mark where hits records should be placed, and are filled dynamically by InstantSearch (https://www.algolia.com/doc/guides/building-search-ui/getting-started/js/#add-the-search-ui-code).     – Paulo Apr 10 '19 at 19:45
  • 1
    it looks like InstantSearch shows how to customize the html & css of the hits items that are added https://www.algolia.com/doc/guides/building-search-ui/getting-started/js/#customize-hits-and-add-a-final-touch we would still need the html markup of the hits being added in order to properly help. – Arron McCrory Apr 10 '19 at 19:53
  • I just found a way to do that. I changed the Algolia.css "complete" file to Reset.css, the "minimum" file, as listed here: https://www.algolia.com/doc/guides/building-search-ui/installation/js/#load-the-style . It works as I want. – Paulo Apr 10 '19 at 20:09
  • Very nice, it sounds like you have figured everything out – Arron McCrory Apr 10 '19 at 20:15