Seach when input is not empty and with delay for typing complete - angular2-forms

Question

I want to call service only when user input is not empty and ith some delay so user finish the typing.
Below is the code. Please help.
Component.ts
searchByName(event) {
this.facilityService.searchFacilityName(event.target.value).subscribe(facilities => this.facilities = facilities);
}
Service.ts
searchFacilityName(name) {
return this.http.get('http://localhost:8000/searchFacilityByName/' + name)
.map((response:Response) => response.json())
.catch(
(error: Response) => {
return Observable.throw('Something went wrong. Please try again.')
}
);
}

Answer 1

This will be helpful,
this.testForm.controls.searchText.valueChanges.subscribe(x=>{
if(this.testForm.controls.searchText.dirty && this.testForm.controls.searchText.valid) {
setTimeout(function(){
this.searchFacilityName(this.testForm.controls.searchText.value)
},3000);
} });

Answer 2

You need to specify a time limit first i.e. amount of time you want to wait after the last keyup event to make sure that the user has stopped typing.
After that you can try this
<input type='text' [ngModel]='userInput' (keyup)='checkTimeLimit()' (keydown)='typeCheck = typeCheck + 1'>
In your component:
typeCheck = 0;
userInput;
timeLimit = 5000; // It is the time limit after which you consider that user has stopped typing (5s)
checkTimeLimit() {
const temp = this.typeCheck;
setTimeout(() => {
if (temp === this.typeCheck) { // It checks whether the user has pressed another key before the specified time limit
this.typeCheck = 0;
this.searchFacilityName(userInput);
}
}, this.timeLimit);
}