how to show autocomplete options on focus

Question

I'm writing an angular6 application with latest angular-material.

I use the component mat-autocomplete with a mat-input for an auto-complete feature.

what I'm trying to achieve is that when the user focus on the input element, he will see all the available auto-complete options even without typing anything.

this is the html file of the mat-autocomplete component

<form [formGroup]="carTypeFormGroup" (ngSubmit)="okButton()">
  <mat-form-field>
    <input matInput formControlName="carCompany"
           placeholder="foo" aria-label="foo" [matAutocomplete]="autoCarCompany">
    <mat-autocomplete  #autoCarCompany="matAutocomplete">
      <mat-option *ngFor="let carCompany of filteredCarCompanies | async" [value]="carCompany">
        <span>{{carCompany}}</span>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
...

and this is the code for the component's class:

@Component({
  selector: 'app-car-type',
  templateUrl: './car-type.component.html',
  styleUrls: ['./car-type.component.scss']
})
export class CarTypeComponent implements OnInit {

  carTypeFormGroup: FormGroup;

  filteredCarCompanies: Observable<CarType[]>;
  filteredCarModels: Observable<CarType[]>;
  carCompanies = [];
  carCompaniesLowercase = [];
  carModels = [];
  carTypes = [];

 private _filterCarCompanies(value: string): CarType[] {
    if (this.carCompaniesLowercase.indexOf(value.toLowerCase()) >= 0) {
      this.mainGql.GetCarModels(value).subscribe((data: any) => {
        this.carModels = [];
        data.data.car_models.forEach((row) => {
          this.carModels.push(row.model_name);
        });
      });
    }
    const filterValue = value.toLowerCase();
    return this.carCompanies.filter(carCompany => carCompany.toLowerCase().indexOf(filterValue) === 0);
  }

ngOnInit() {
    this.carTypeFormGroup = this.formBuilder.group({
      carCompany: ['', Validators.required],
      carModel: ['', Validators.required],
      carType: ['', Validators.required],
      carYear: [new Date().getFullYear(), Validators.required]
    });
    this.filteredCarCompanies = this.carTypeFormGroup.get('carCompany').valueChanges
      .pipe(startWith(''), map(carCompany => carCompany ? this._filterCarCompanies(carCompany) : this.carCompanies.slice()));
}
...
}

when I check the mat-autocomplete examples at https://material.angular.io/components/autocomplete/examples, there when I focus on the input element I do see all the results..

What's the difference? What am I missing?

Does this aquire after the first time or after you have filtered it and openen again? — Swoox
I think you have to start with your map(carCompany => and check if it return the data and work from there on and find out why it's not working. Next to that I see nothing wrong here.. — Swoox

ufk ufk · Accepted Answer · 2018-09-27T12:12:27

the filter is executed when the page loads.. but I loaded the data on graphql so the data arrived after the first filter executed. I changed it so the filter will be executed only after the data was received.

thanks Swoox for helping me notice it.

ngOnInit() {
 ...
 this.carsService.GetCarCompanies().subscribe((data: any) => {
      this.carCompanies = [];
      this.carCompaniesLowercase = [];
      data.data.car_companies.forEach((row) => {
        this.carCompanies.push(row.company_name);
        this.carCompaniesLowercase.push(row.company_name.toLowerCase());
      });
      this.filteredCarCompanies = this.carTypeFormGroup.get('carCompany').valueChanges
        .pipe(startWith(''), map(carCompany => carCompany ? this._filterCarCompanies(carCompany) : this.carCompanies.slice()));
    });

how to show autocomplete options on focus

1 Answers