Angular 7 autocomplete with http

Question

Angular 7 autocomplete with http

Navigation

#1 by (0 votes)

0

I have a field in my project that needs to use autocomplete. But it is not working. Could someone help me?

Component

filteredCostCenter: Observable<CentroCusto[]>;
ngOnInit() {
    this.filteredCostCenter = this.form.controls.centroCustoId.valueChanges.pipe(
  startWith(null),
  debounceTime(200),
  distinctUntilChanged(),
  switchMap(value => {
     return this.searchCostsCenters(value || '')
  })
);
}

  private searchCostsCenters(value: string): Observable<CentroCusto[]> {


return this.centroCustoService.getWithPages(1,30,'id','asc', value).pipe(
  map(response => response.results.filter(opt => {
    return opt.nome.toLowerCase().indexOf(value.toLowerCase())
  })
));

};

HTML

   <mat-form-field class="app-form-control inputPadding">
                            <input type="text" matInput placeholder="Centro de Custo" formControlName="centroCustoId"
                                aria-label="Number" [matAutocomplete]="auto">
                            <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
                                <mat-option *ngFor="let result of filteredCostCenter | async" [value]="result">
                                    {{ result }}
                                </mat-option>
                            </mat-autocomplete>
                        </mat-form-field>

Using this way, it does not work at all. I did based on the example that exists on the angular material site.

angular angular-6

asked by anonymous 02.01.2019 / 14:47

1 answer

jQuery Mask Plugin does not format the number correctly Nuxt 2 how to serve the assets correctly in Firebase Host

score 0 · Accepted Answer

To solve, I had to change my thinking. First, since I needed to use HTTP so that I could go to the bank to search for the informed term, based on the code available on the angular material , I have adapted to the following routine:

this.filteredCostCenter = this.form.controls.centroCustoId.valueChanges.pipe(
  startWith(null),
  debounceTime(200),
  distinctUntilChanged(),
  switchMap(value => this.searchCostsCenters(value))
);
  private searchCostsCenters(value: string): Observable<CentroCusto[]> {

return this.centroCustoService.getWithPages(1,30,'id','asc', value).pipe(
  map(response => response.results.filter(option => option.nome.toLowerCase().includes(value)))
);

};

And it has a detail, in my HTML I have several autocompletes, so, remember to change the name of each one by saying a more friendly name, as below:

 <mat-form-field class="app-form-control inputPadding">
                            <input matInput aria-label="Centro de Custo" placeholder="Centro de Custo" formControlName="centroCustoId"
                                [matAutocomplete]="autoCentroCusto">
                            <mat-autocomplete autoActiveFirstOption #autoCentroCusto="matAutocomplete">
                                <mat-option *ngFor="let result of filteredCostCenter | async" [value]="result.nome">
                                    {{ result.nome }}
                                </mat-option>
                            </mat-autocomplete>
                        </mat-form-field>