Solution to not query back-end too often in autocomplete

Learn
1

Before I start re-inventing one, I’d like to hear community’s opinions, suggestions or existing solutions to a common problem: you have a text input, upon typing into which it automatically starts some sort of a process, like showing search results or suggestions. In order to not do a dumb “request on every keystroke”, a better solution would be to:

  • have a time inverval between inputs, so that if you type next letter it won’t start searching until there’s a pause
  • if there’s a search happening already, wait for it to finish before starting a new one, and upon starting do the one that ahs most recent input (cancel all previous ones)

and potentially other things I forgot. I’ve implemented this for one component myself, now I need to reuse this logic, so I thought before I refactor it I could ask for community input.

Thanks!

2

The key word for the first requirement is debounce.

There are already a couple of packages for this kind of functionality.

The second requirement (cancel requests in flight) is more complex and the best you can do (to my knowledge) is to give each request an ID and keep a log of canceled IDs that you can check against when the request returns.

3

As @pdamoc said, its called debouncing.

I’ve just recently added a page about this topic to my cookbook. Would nice if you could check it out and maybe give some feedback.

Useful packages that do exactly what you need are:

For additional insights, maybe you also want to checkout the discussion we had a few weeks ago about that very topic.