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?)

Thanks!

Hi Felix,

Could you share your implementation using our codesandbox.io templates found below?

Thanks!

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


Thanks!

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:

        <ais-clear-refinements
          :excluded-attributes="[]"
          :included-attributes="['query']"
        >
          <button slot-scope="{ refine }" @click="refine">
            Also resets search-box text externally
          </button>
        </ais-clear-refinements>
1 Like