How to implement a search field in Angular X that starts some action as soon as you stop typing

Everybody knows the Google search that displays some recommendations while you are typing.

Some times when you are developing an application you might need a similar functionality for implementing a kind of free text search to quickly find results in a long list of data stored in a database that might be filtered and delivered by a webservice in the background. 

The requirement:

The search should happen without clicking a button but it should not start right after each single character you have typed. It should wait a short moment and after you have stopped typing immediately start the search.


The implementation is quite simple and the same way you could do that in Javascript.

First we need to prepare our template to have an input field in which the user can type in a search string. 

Whenever the user types a character a function should be called. This is done with the keyup event.

(keyup)="searchChanged($event)"

In our component we have to define a function named 'searchChanged' which receives the event as a parameter.

The parameter 'e' is a keyboard event which contains all information we need and occurs after each character typed in by the user.

Here is the output (partly) in the console window:

The event has a member named 'target' which again has a member named 'value' which is the text the user has typed in. 

In this function we could just start over calling a webservice or somehow trigger a search. But that is not what we want to do because it does not make sense to call a service after each single character.
That means we have to schedule the search to happen after the user has stopped typing for a short moment. 

How to do that?

It is simple. Whenever the user types a character we use setTimeout to schedule a function call i.e. after 400 millis. To prevent that we call that function for each character after waiting for 400 millis we have to cancel already running timers with each character that is typed in. If the user stopps typing a last timer is left and executes after 400 milliseconds.

Here is the code:

To keep the current timer in mind we have to define a variable that references the timer.

Then we can fill in some code into the function 'searchChanged' and add a function that is called by the timer.

First we check if 'timer' is set. If yes the timer is cancelled by calling 'clearTimeout'. Then we schedule a new timer to call the search function by calling setTimeout. The first parameter is the function that should be called, the second parameter is the wait time (400 millis) and the last parameter is what we want to hand over to the search function. As long as the user is typing the function searchChanged is called by each character. The existing timer (that has not yet executed) is cancelled and for the new search token we start another timer. So when the user stops typing for 400 milliseconds the timer will execute and trigger the search.

Done. The basic functionality of a search field is implemented. Now we can feel free to add a minimum length for the search string or handle empty search strings etc.

To demonstrate the difference between immediately searching and triggered/delayed searching I have made a little Plunker which you can find here: 

Open Plunker