Thanks for your help.
I think what’s confusing is that when you type something in the autocomplete box, it appears in the instantsearch box as well. This is not something I wanted to happen. So I’m sorry for the confusion.
I’ve updated your CodePen with the intended behavior.
Let’s start over and I’ll walk you through the problem again.
- In the image below, with no search being done, this is what is shown. There are three results, Big - Comedy, Happy Feet - Animation, and Superman - Action.
- In the image below, Comedy has been entered into the autocomplete searchbox. Now only, one result is shown, Big - Comedy which is correct as it matches Comedy.
- In the image below, the ‘clear the search query’ button which appeared in the image above has been clicked. This clears Comedy from the autocomplete searchbox which is correct, but it still shows, Big - Comedy as the result. The results have not been cleared.
When a user clicks ‘clear the search query’ button I want it to clear the input from the autocomplete box, which in this example is Comedy and then show all three results, Big - Comedy, Happy Feet - Animation, and Superman - Action, as in the first image, as there is no search query inputted since it has been cleared.
Does that make sense?
If you were to use the updated Codepen and do the exact same steps as above but use the instantsearch.js searchbox, it does exactly this behavior that I’ve described.