CODEWITHSUNDEEP
angularangular-material
user10011493
user10011493

Reputation:

Autocomplete for more than one fields shows same options in all the fields

I am new to angular and am trying to use angular material. To be very specific, I am using autocomplete feature of angular material forms.

I need to have two input dropdown fields with option to search. I have followed the example given on the official site, but it only works for a single field. If I have 2 fields, I get the same options in both the fields. Here is the link to my code:

Link to my code

It would be great if someone could have a look at it and let me know where I am going wrong.

Thanks in advance.

Upvotes: 2

Views: 2075

Answers (4)

Abdullah
Abdullah

Reputation: 2953

I faced the same issue, set different matAutocomplete property.

Should be unique -

  • In Input ===> [matAutocomplete]="skill_auto" ,
  • In mat-autocomplete ===> #skill_auto="matAutocomplete"
<mat-form-field>
    <mat-label>Select Skill</mat-label>
    <input type="text"
           placeholder="Pick one skill"
           aria-label="text"
           matInput
           [formControl]="skillControl"
           [matAutocomplete]="skill_auto">
    <mat-autocomplete #skill_auto="matAutocomplete">
      <mat-option *ngFor="let option of Skills" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

<mat-form-field>
    <mat-label>Select Hobby</mat-label>
    <input type="text"
           placeholder="Pick one hobby"
           aria-label="text"
           matInput
           [formControl]="hobbyControl"
           [matAutocomplete]="hobby_auto">
    <mat-autocomplete #skill_auto="matAutocomplete">
      <mat-option *ngFor="let option of Hobbies" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

Upvotes: 0

Taulant
Taulant

Reputation: 205

For everyone who like me struggled with this while using the same "options": The accepted answer helped me figure this out. I was using the same Control and had to change them as well.

My code:

  myControl = new FormControl<string | Stop>('');

  ngOnInit() {
    this.filteredOptionsStart = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => {
        const name = typeof value === 'string' ? value : value?.name;
        return name ? this._filterStart(name as string) : this.optionsStart.slice(0, 10);
      })
    );
    this.filteredOptionsStop = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => {
        const name = typeof value === 'string' ? value : value?.name;
        return name ? this._filterStop(name as string) : this.optionsStop.slice(0, 10);
      })
    );
  }

The changed code:

  myControl = new FormControl<string | Stop>('');
  myControl2 = new FormControl<string | Stop>('');

  ngOnInit() {
    this.filteredOptionsStart = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => {
        const name = typeof value === 'string' ? value : value?.name;
        return name ? this._filterStart(name as string) : this.optionsStart.slice(0, 10);
      })
    );
    this.filteredOptionsStop = this.myControl2.valueChanges.pipe(
      startWith(''),
      map(value => {
        const name = typeof value === 'string' ? value : value?.name;
        return name ? this._filterStop(name as string) : this.optionsStop.slice(0, 10);
      })
    );
  }

Upvotes: 0

Josh
Josh

Reputation: 10604

Looks like the exporting of matAutocomplete="auto" twice is occurring. A quick fix is to change one to group and the other to singular:

<form class="example-form">
<mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="autoGroup">
    <mat-autocomplete #autoGroup="matAutocomplete">
        <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
            {{option}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

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

Upvotes: 0

penleychan
penleychan

Reputation: 5470

This is because you are referencing auto twice. Change one of em, for example, notice auto1

<mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick name" aria-label="Name" matInput [formControl]="namesControl" [matAutocomplete]="auto1">
    <mat-autocomplete #auto1="matAutocomplete">
        <mat-option *ngFor="let option of filteredNames | async" [value]="option">
            {{option}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

Here's a fork of your stackblitz

Upvotes: 2

Related Questions