Multiple autocomplete material angular shows same dropdown

Issue

My multiple dropdowns work but it shows the same value. I am following angular material component.

I have created different filtered for each array object still shows the same dropdown.

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import { startWith } from 'rxjs/operators/startWith';
import { map } from 'rxjs/operators/map';
import { UsersComponent } from '../users/users.component';

@Component({
  selector: 'app-accommodation',
  templateUrl: './accommodation.component.html',
  styleUrls: ['./accommodation.component.css']
})
export class AccommodationComponent {

      myControl = new FormControl();

      country = [
        new UsersComponent('United States'),
        new UsersComponent('Canada'),
        new UsersComponent('Brazil'),
        new UsersComponent('India'),
        new UsersComponent('China'),
        new UsersComponent('Japan'),
      ];

      nationality = [
        new UsersComponent('American'),
        new UsersComponent('Canadian'),
        new UsersComponent('Indian'),
        new UsersComponent('Chinese'),
        new UsersComponent('African'),
        new UsersComponent('Japanese'),
      ];


      countryFilter: Observable<UsersComponent[]>;
      nationalityfilter: Observable<UsersComponent[]>;

      ngOnInit() {
        this.countryFilter = this.myControl.valueChanges
          .pipe(
            startWith<string | UsersComponent>(''),
            map(value => typeof value === 'string' ? value : value.name),
            map(name => name ? this.filter(name) : this.country.slice()),
          );
        this.nationalityfilter = this.myControl.valueChanges
          .pipe(
            startWith<string | UsersComponent>(''),
            map(value => typeof value === 'string' ? value : value.name),
            map(name => name ? this.filter(name) : this.nationality.slice()),
          );
      }


      filter(name: string): UsersComponent[] {

        return this.country.filter(option => option.name.toLowerCase().indexOf(name.toLowerCase()) === 0),
               this.nationality.filter(option => option.name.toLowerCase().indexOf(name.toLowerCase()) === 0);       
      }

      displayFn(users?: UsersComponent): string | undefined {
        return users ? users.name : undefined;
      }

}

Below is the HTML code, where I have changed id as per this post. Still doesn’t work.

        <div class="col-sm-6">
        <mat-form-field class="example-full-width">
            <input type="text" placeholder="Country" aria-label="Country" matInput [formControl]="myControl" [matAutocomplete]="auto">
            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
                <mat-option *ngFor="let option of countryFilter | async" [value]="option">
                    {{ option.name }}
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>
    </div>
    <!-- col end -->
    <div class="col-sm-6">
        <mat-form-field class="example-full-width">
            <input type="text" placeholder="Nationality" aria-label="Nationality" matInput [formControl]="myControl" [matAutocomplete]="auto">
            <mat-autocomplete #autoNationality="matAutocomplete" [displayWith]="displayFn">
                <mat-option *ngFor="let option of nationalityfilter | async" [value]="option">
                    {{ option.name }}
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>
    </div>
    <!-- col end -->

After @Mjstk update it worked awesome but still shows some error
enter image description here

Solution

You have to change the name of the second autocomplete, so it doesnt link to the first one aswell, change “auto” to “autoNationality”: [matAutocomplete]=”autoNationality”>

<mat-form-field class="example-full-width">
            <input type="text" placeholder="Nationality" aria-label="Nationality" matInput [formControl]="myControl" [matAutocomplete]="autoNationality">
            <mat-autocomplete #autoNationality="matAutocomplete" [displayWith]="displayFn">
                <mat-option *ngFor="let option of nationalityfilter | async" [value]="option">
                    {{ option.name }}
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>

Answered By – Mjstk

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.