CODEWITHSUNDEEP
algolia
sinusGob
sinusGob

Reputation: 4313

Whenever I apply autocomplete.js the input text box will change Algolia

Im using algolia to perform a search on my website, but I realized one thing. Im using search box generator to customized my search input field. However the problems occur, when I try to apply autocomplete.js on my search input field Initially, it looks like the one below, enter image description here

but when I apply the autocomplete feature it will look like this

enter image description here

Code - HTML

<form id="search" novalidate="novalidate" onsubmit="return false;" class="searchbox sbx-google" style="margin-top: 7px;">
        <div role="search" class="sbx-google__wrapper">
          <input type="search" id="search_input" name="search" placeholder="Search" autocomplete="off" required="required" class="sbx-google__input">
          <button type="submit" title="Submit your search query." class="sbx-google__submit">
            <svg role="img" aria-label="Search">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-13"></use>
            </svg>
          </button>
          <button type="reset" title="Clear the search query." class="sbx-google__reset">
            <svg role="img" aria-label="Reset">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-3"></use>
            </svg>
          </button>
        </div>
      </form>

Code - JAVASCRIPT

  autocomplete('#search_input',
{ hint: false }, {
    source: autocomplete.sources.hits(index, {hitsPerPage: 5}),
    //value to be displayed in input control after user's suggestion selection
    displayKey: 'name',
    //hash of templates used when rendering dataset
    templates: {
        //'suggestion' templating function used to render a single suggestion
        suggestion: function(suggestion) {
          console.log(suggestion)
          return '<span>' +
            suggestion._highlightResult.title.value + '</span>';
        }
    }
});

The custom search box is advised by algolia themselves, on the autocomplete documentation. I have no idea on how to solve this problem, seems like the js script overwrite the css styling. This only happen if I passed in the #search_input in the autocomplete function

Here is the js fiddle https://jsfiddle.net/Ldpqhkam/

Upvotes: 1

Views: 1302

Answers (1)

Julien Bourdeau
Julien Bourdeau

Reputation: 1193

Algolia autocomplete adds a span around the input and that's what breaks the design. It has inline style changing the display, you can override it to fix the design.

.algolia-autocomplete {
  display: inline !important;
}

Upvotes: 2

Related Questions