Multiple autocomplete material angular shows same dropdown

Question

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

score 25 · Accepted Answer · answered Jan 12 '18 at 10:33

25

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 Jan 12 '18 at 10:33

Mjstk

508
4
9

It worked but it still shows error when I focus input. Any idea ? I have posted screenshot of error in question. – Santosh Jan 12 '18 at 11:01
1

try to change [formControl]="myControl" to: formControlName="myControl" – Mjstk Jan 12 '18 at 11:10
yes it did a job. I also changed it to the .ts file. it work nice – Santosh Jan 12 '18 at 11:13
1

Well It did the job nicely but it should be more clear in the docs... Or I don't know maybe I missed something – Rahul Sonwanshi Jun 01 '21 at 08:17
Thank you! I agree this needs to be made more clear in the docs. I was pulling my hair out trying to figure this one out. – Steve Whitmore Apr 12 '23 at 13:32

score 0 · Answer 2 · edited Aug 30 '21 at 11:33

0

Please change the following:

auto to autoNationality, [matAutocomplete]="autoNationality"
[formControl]="myControl" -> formControlName="myControl"

edited Aug 30 '21 at 11:33

Mohamed Karkotly

1,364
3
13
26

answered Aug 25 '21 at 13:18

Ntakadzeni Tharage

41
5

Multiple autocomplete material angular shows same dropdown

2 Answers2