I have text box and assigned to it keyup
event a search function but I want it to happen with delay, not on every keypress
here is the html code :
<input type="text" [(ngModel)]="searchedKPI" (keyup)="searchConfigTree()">
and here is ts code :
list = list.filter(item => item.label.toLocaleLowerCase().includes(this.searchedKPI.toLocaleLowerCase())).slice();
and here is the example I wanted to search "text" string but the event happens 4 times, I want to this happens once only for "text" string :
what the solution?
Welcome to the Observable's world. Just use Observable to get the desired result. Get the reference of your input in the component and use this code. debounceTime
will let the event to trigger at least after 1 second
from the previous trigger. It will let you not to fire on every keyup
when user types fast.
Observable.fromEvent(yourInput, 'keyup').debounceTime(1000).subscribe(value => /* */)
In the subscribe
method you can write your logic. The value
is the value of the input.
View template.html
<input type="text" [(ngModel)]="searchedKPI" (keyup)="searchConfigTree()" #something>
component.ts (do not forget implement the AfterViewInit)
source: any;
@ViewChild("something") something:ElementRef;
ngAfterViewInit(): void {
this.source = fromEvent(this.something.nativeElement, 'keyup');
this.source.pipe(debounceTime(1200)).subscribe(c =>
{
list = list.filter(item => item.label.toLocaleLowerCase().includes(this.searchedKPI.toLocaleLowerCase())).slice();
}
);
}
This solution works for me
View Template.html
<input type="text" placeholder="Filter..." class="form-control" [(ngModel)]="filter" (input)="searchChange($event.target.value, true)">
<button class="btn btn-primary" type="button" (click)="searchChange(filter, false)"><i class="fa fa-search"></i></button>
Comonent.ts
filter= '';
private timer: any;
searchChange(filter: string, to = false) {
filter = filter.toLowerCase();
if (to) {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.valuesFilter = this.allValues.filter(f => f.field.toLowerCase().includes(filter));
}, 400);
} else {
this.valuesFilter = this.allValues.filter(f => f.field.toLowerCase().includes(filter));
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With