How to implement a dynamic data search algorithm (using extjs as an example)?

Question

JavaScript

Hello!

I want to implement dynamic data search.
Those. when you enter text in the search bar, after each keystroke, an ajax request is created, which in turn accesses the database and pulls out the data.
So the algorithm is not complicated, you just hang up the request code on event.keyUp or event.keyPress and everything seems to be fine.
The problem comes when you start entering data very quickly. At some point, the request apparently does not have time to load and fails.

I make a request in the extjs javaScript framework and it looks something like this:
By pressing a key, it is checked that the length of the entered string is more than three and a letter or number is pressed

if (search_value.length > 3 && event.keyCode > 46 && event.keyCode < 91) {
            store2.proxy.api.read = '/isc/get_store2/?value='+search_value;
            store2.loadPage(1);
}

When pressed carefully, everything works well, but if you type very quickly, then something seems to fail somewhere and the error Uncaught TypeError: Cannot read property 'internalId' of undefined is displayed in the console
It is clear that this is a specific extjs error that says that it is not possible to load store2, but the bottom line is that it seems that it simply does not have time to process the previous request and a new one is superimposed on it.

In this regard, the question is how to block the execution of a query to the database if the previous query has not been completed at the moment. Well, or in general, what are the dynamic search mechanisms that can solve this kind of problem?

Answer 1

You need a delay between key presses. Here is a great code example.