Cancel http requests in angular as user keeps typing for autocomplete input

Question

I have an input with a material autocomplete component linked to it. as the user types calls are made to the server for results. its working fine as the server returns the results in order (for now) But I still would like to cancel the last call before triggering the next one. this is the method I'm using now:

    getCodigosPon(needle: string): Observable<any> {
      if (needle.length > 3) {
        const options = createRequestOption({ idPon: needle });
        return this.http.get<string[]>(this.codigoPonUrl, { params: options, observe: 'response' });
      } else {
        return of([]);
      }
    }

try if this helps learnrxjs.io/learn-rxjs/operators/filtering/debounce — Lean Pilar
– Lean Pilar, Commented May 9, 2021 at 10:14

Akxe · Accepted Answer · 2021-05-09 16:48:50Z

4

Here is usual set up for input to HTTP connection.

debounceTime is optional, yet nice to have.
switchMap is essential, it makes it so, that the previous request will be cancelled

class MyComponent {
  readonly input$ = new BehaviourSubject('default input value');

  // ...

  readonly codigosPonValue$ = this.input$.pipe(
    debounceTime(300), // If you want...
    switchMap(needle => {
      if (needle.length > 3) {
        const params = createRequestOption({ idPon: needle });
        return this.http.get<string[]>(this.codigoPonUrl, { params });
      } else {
        return of([]);
      }
    })
  );
}

With HTML like so...

<input (change)="input$.next($event.value)>
<pre>
{{codigosPonValue$ | async | json}}
</pre>

answered May 9, 2021 at 16:48

Akxe

11.8k6 gold badges43 silver badges80 bronze badges

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

Collectives™ on Stack Overflow

Cancel http requests in angular as user keeps typing for autocomplete input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related