Autocomplete.js clear button

I came across this CodePen by Algolia that demonstrates autocomplete.js which I’m using for my project.

How can I modify the behavior in the CodePen so that the close button clears the search similar to how it works in instantsearch.js?

Currently, the close button removes the search input, but it does not reset the search.

Can you make a gif of the experience you’re getting? I’m seeing what you’re describing that you want to happen :thinking:

2018-02-02 10_16_51

Alright, I created a quick mockup and created my first ever gif, sorry for the bad quality :smiley:

Step 1: Enter comedy in autocomplete.js box.

Step 2: Select comedy

Step 3: Autocomplete finds the comedy records in the hitTemplate

Step 4: Click to remove comedy from autocomplete. It removes comedy.

Step 5: The result Big, Comedy is still shown in the hitTemplate. This is where I would like it to display all results after clearing the autocomplete box.

Sorry, but I can’t read whats happening in that gif, do you have the fiddle too?

Sure. i’ll post a codepen in the next few minutes

Here’s a quick codepen. The css is off, but hopefully you will understand what I’m getting at.

I’ve quickly took a look at the css to make it more obvious what’s going on, but I see no queries yet being done when typing. Can you take a look?

Hi Haroen,

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.

  1. 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.

  1. 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.

  1. 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.

@haroen Have you had a chance to look at my latest reply and the revised codepen? Thanks.

Hi @tommy,

Thanks for the explanations, it helps a lot.

I updated the example in order to achieve the behaviour that you expect. You need to attach a click event on the reset button. When the button is clicked you have to remove the facet refinement for category on the InstantSearch instance. I also added the listener when the SearchBox pass to an empty value. Feel free to remove it. You can find the example on CodePen.

Hope that helps! :slightly_smiling_face:

1 Like

@samuel.vaillant Thank you! :pray:

Very grateful for the help. Merci. :smiley: