call keyup event with delay in angular

Question

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?

i want to this happens once only for "text" string – Vala Khosravi Oct 03 '17 at 05:41 — Vala Khosravi, Oct 03 '17 at 05:41
this may help https://stackoverflow.com/a/36849347/5621827 – jitender Oct 03 '17 at 05:53 — jitender, Oct 03 '17 at 05:53

Suren Srapyan · Accepted Answer · 2017-10-03T05:47:20.143

18

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.

edited Oct 03 '17 at 05:47

answered Oct 03 '17 at 05:42

Suren Srapyan

66,568
14
114
112

1

Getting error `Observable.fromEvent is not a function` - using rxjs 6.3.3 – amphetamachine Mar 08 '19 at 18:26
@amphetamachine use only `fromEvent` – JimmyRare Mar 12 '19 at 11:51
1

Using `rxjs` higher than 6 version requires just `fromEvent` instead of `Observable.fromEvent` – Suren Srapyan Mar 12 '19 at 11:58
thanks for your help, it help me a lot =D but complement with – Esteban Perez Jun 21 '19 at 17:21

score 11 · Answer 2 · answered Jun 21 '19 at 17:28

11

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();
                }
                );
              }

answered Jun 21 '19 at 17:28

Esteban Perez

390
3
5

4

what is 'this.source' in this context? – Torsten N. Apr 20 '20 at 09:37
@TorstenN. Hello, it's the `Subscription` object output of the `fromEvent(..) function. it can also be used to end the subscription in `ngOnDestroy(..) { }` by calling `this.source.unsubscribe()`whenever we no longer use the actual component to prevent memory leaking issues. – sohaieb azaiez Oct 16 '21 at 09:45

score 1 · Answer 3 · answered Jul 26 '20 at 22:54

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));
    }
  }

score -1 · Answer 4 · answered Apr 13 '21 at 15:53

-1

cant we use timeout function?

(keyup)="keyupFunc()" --> html
keyup() {
       timeout((your function code), delay_time_you_need);
   } --> ts

answered Apr 13 '21 at 15:53

Nikhil V S

1

this solution is not working when `keyup()` happens multiple at the same time. – Vala Khosravi Jun 06 '21 at 17:04

call keyup event with delay in angular

4 Answers4