How to create a Debounced SearchBox?

Hello,

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: https://github.com/algolia/instantsearch.js/issues/1994

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(e.target.value), 200);

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

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

Edit Debounced SearchBox

Let me know if this helps you out.

Cheers,

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