Angular Material 2 Remote Autofill. How to abort requests?

Question

I use Angular Material Autocomplete to display search-based results in the remote API (filtering is done on the remote side).

HTML side:

<mat-form-field class="full-width">
    <input type="text" placeholder="Brand" aria-label="Number"
        matInput [formControl]="formControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let brand of brands | async" [value]="brand.name">
            {{ brand.name }}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

TS side:

this.brands = this.formControl.valueChanges.flatMap(
    q => this._apiService.getVehiclesBrands(q).map(x => x.results)
);

At this point, it works fine. I get a list of brands from the remote, and I can select a value from the autocomplete list. Now the question is how ... how can I interrupt all requests every time the text input changes?

There are many examples with remote queries, but the idea is not to get all deleted results in init. The idea is to get deleted results every time the user changes the text input.

Answer 1

flatMap switchMap :

this.brands = this.formControl.valueChanges.switchMap(
    q => this._apiService.getVehiclesBrands(q).map(x => x.results)
);

, XHR , - - . XHR, , 500 , . . :

this.brands = this.formControl.valueChanges.debounceTime(500).switchMap(
    q => this._apiService.getVehiclesBrands(q).map(x => x.results)
);