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?

what is wrong ?

Sajeetharan
– Sajeetharan

2017-10-03 05:40:48 +00:00
Commented Oct 3, 2017 at 5:40 — Sajeetharan
– Sajeetharan, Commented Oct 3, 2017 at 5:40
i want to this happens once only for "text" string

Vala Khosravi
– Vala Khosravi

2017-10-03 05:41:26 +00:00
Commented Oct 3, 2017 at 5:41 — Vala Khosravi
– Vala Khosravi, Commented Oct 3, 2017 at 5:41
try using debounce....!

Jai
– Jai

2017-10-03 05:41:37 +00:00
Commented Oct 3, 2017 at 5:41 — Jai
– Jai, Commented Oct 3, 2017 at 5:41
this may help stackoverflow.com/a/36849347/5621827

jitender
– jitender

2017-10-03 05:53:55 +00:00
Commented Oct 3, 2017 at 5:53 — jitender
– jitender, Commented Oct 3, 2017 at 5:53

Suren Srapyan · Accepted Answer · 2017-10-03 05:47:20Z

21

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 3, 2017 at 5:47

answered Oct 3, 2017 at 5:42

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

amphetamachine Over a year ago

Getting error Observable.fromEvent is not a function - using rxjs 6.3.3

meadowstream Over a year ago

@amphetamachine use only fromEvent

Suren Srapyan Over a year ago

Using rxjs higher than 6 version requires just fromEvent instead of Observable.fromEvent

Esteban Perez Over a year ago

thanks for your help, it help me a lot =D but complement with

Esteban Perez · Accepted Answer · 2019-06-21 17:28:34Z

14

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, 2019 at 17:28

Esteban Perez

5284 silver badges5 bronze badges

2 Comments

Torsten N. Over a year ago

what is 'this.source' in this context?

sohaieb azaiez Over a year ago

@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.

Stivens · Accepted Answer · 2020-07-26 22:54:11Z

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

Nikhil V S · Accepted Answer · 2021-04-13 15:53:09Z

-1

cant we use timeout function?

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

answered Apr 13, 2021 at 15:53

Nikhil V S

1

1 Comment

Vala Khosravi Over a year ago

this solution is not working when keyup() happens multiple at the same time.

Collectives™ on Stack Overflow

call keyup event with delay in angular

4 Answers 4

4 Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related