Using autocomplete.js as InstantSearch.js searchbox

copy of https://github.com/algolia/autocomplete.js/issues/216 by @SchmidtDawid

Hi i want to implement autocomplete but i can’t make it work with instantsearch. When i have 2 inputs - one is for searchBox widget and the second is for autocomplete, everything works great (but of course autocomplete doesn’t have impact on hits). But when autocomplete and searchbox pointing on same input i have an error.

Uncaught TypeError: Cannot read property 'style' of null
    at search-box.js:130
    at Object.render (connectSearchBox.js:136)
    at InstantSearch.js:317
    at n (_arrayEach.js:15)
    at r (forEach.js:37)
    at t.value (InstantSearch.js:313)
    at r.n.emit (events.js:84)
    at algoliasearch.helper.js:1245
    at n (_arrayEach.js:15)
    at r (forEach.js:37)

error pointing on this line: resetButton.style.display = query && query.trim() ? 'block' : 'none';.

This is my script list:

  <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3/dist/instantsearch.min.js"></script>
  <script src="/js/algolia_search.js"></script>
  <script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
  <script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>

I tried every possible configuration, but is doesn’t matter.

I don’t have idea how to solve it. Can you help?

[SchmidtDawid]

Yes we write comments almost in same time. I’ll try your solution tomorrow because in my solution selecting autocomplete items by arrows doesn’t change input value.

[Haroenv]

Awesome!