How to create a Debounced SearchBox?


The component is pretty awesome! However I wanted to have debounce happening on the box, I see that there is a searchAsYouType property however disabling it will then only allow me to search on Enter key press.

is it possible to have a debounced searchAsYouType?

It’s something that’s in our backlog.

For the record, here was the discussion on our previous repo:

Okay no problem, its not a very big deal, but would be good as a feature whenever it can be implemented.

Hi @harshmaur!

As Marie-Laure said it’s not currently implemented out of the box.

However you can use connectSearchBox() to implement a react component which debounces refine():

import React from 'react';
import debounce from 'lodash/debounce';
import {connectSearchBox} from 'react-instantsearch/connectors';

export default connectSearchBox(({refine}) => {
   const debouncedSearch = debounce(e => refine(, 200);

   const onChange = e => {
     debouncedSearch(e, e.eventTarget);

  return <input placeholder="Search here..." type="search" onChange={onChange}/>

Edit Debounced SearchBox

Let me know if this helps you out.


1 Like

Thanks a lot, yes connecting it was always a way. I was looking if it could have been done with widgets and its simplicity.

1 Like