Vue Instantsearch - custom search box -add clear search button

Hi! I’m using the v2 beta of vue-instantsearch and have followed these docs to create a custom searchbox – my question is how to add a custom reset/clear button to empty the input and discard the search (currentRefinement?)


Hi Felix,

Could you share your implementation using our templates found below?


Hi Jason, sure, hopefully this demonstrates what I mean:


Here’s one option to do it:

Thanks Haroen, that works great!

Now I’m wondering if it’s possible to reset the refine from outside the searchbox, say from clicking a results item. Is there a way to target the searchbox externally? I’ve updated my codesandbox. Thanks again for the help!

Outside of the input is possible; but not outside of the InstantSearch component:

          <button slot-scope="{ refine }" @click="refine">
            Also resets search-box text externally
1 Like