Select dropdown box in autocomplete not working

How do I have a select dropdown box in the autocomplete menu? Everytime I click on the select box it closes the autocomplete? From looking at the code the autocomplete closes on blur.


Hi @rbarron00,

Thanks for contacting Algolia and posting to discourse to help the community!

Without seeing the production issue, one quick-fix to try will be setting debug: true in the autocomplete options as described in the README:

var myAutocomplete = autocomplete('#search-input', {hint: false, debug: true}, ...)... 

If still an issue, could you please provide us with a URL where we could see the described issue?

Let us know how it goes and happy coding!

You and Ajay are both correct:

  1. The autocomplete closes on blur
  2. Setting debug: true disables this behavior

With our Shopify integration, you can simply toggle “Enable debug mode” in the Display tab of the app.

That being said, you’ll likely want to have the autocomplete close when people click outside of it.
What I’d recommend would be to implement a transparent overlay, with a z-index lower than our autocomplete, that would show on focus of the input, and would close the autocomplete on click using autocomplete.close().

Thanks, it’s fixed now. Although on IE for some reason I have to click the dropdown really fast a few times to keep the focus on it, otherwise the focus keeps going back to the search box.