Filter autocomplete Material. Some input form work like one input

Question

can you help me please. I have some problem with Autocomplete Material.

I don't know what is the problem, I follow this tutorial: https://material.angular.io/components/autocomplete/overview

In component.ts

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';


@Component({   selector: 'autocomplete-filter-example', 
  templateUrl: 'autocomplete-filter-example.html', 
  styleUrls: ['autocomplete-filter-example.css'] }) 

export class AutocompleteFilterExample {

     myControl: FormControl = new FormControl();  
 myControl1: FormControl = new FormControl(); 
  myControl2: FormControl = new FormControl();

      options = [
        'One',
        'Two',
        'Three'   ];  
      options1 = [
        'test',
        'test2',
        'test1'   ];  
      options2 = [
        'test3',
        'test5',
        'test10'   ];   
filteredOptions: Observable<string[]>;  
 filteredOptions1: Observable<string[]>;  
 filteredOptions2: Observable<string[]>;

      ngOnInit() {
        this.filteredOptions = this.myControl.valueChanges
          .pipe(
          startWith(''),
          map(val => this.filter(val))
          );
        this.filteredOptions1 = this.myControl1.valueChanges
          .pipe(
          startWith(''),
          map(val => this.filter1(val))
          );
        this.filteredOptions1 = this.myControl1.valueChanges
          .pipe(
          startWith(''),
          map(val => this.filter1(val))
          );
        this.filteredOptions2 = this.myControl2.valueChanges
          .pipe(
          startWith(''),
          map(val => this.filter2(val))
          );   }

      filter(val: string): string[] {
        return this.options.filter(option =>
          option.toLowerCase().indexOf(val.toLowerCase()) === 0);   }   
       filter1(value: string): string[] {
        return this.options1.filter(option1 =>
          option1.toLowerCase().indexOf(value.toLowerCase()) === 0);   }   
       filter2(value: string): string[] {
        return this.options1.filter(option1 =>
          option1.toLowerCase().indexOf(value.toLowerCase()) === 0);   }
        }

Component.html

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

    <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one2" aria-label="Number" matInput [formControl]="myControl1" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option1 of filteredOptions1 | async" [value]="option1">
        {{ option1 }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
      <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one3" aria-label="Number" matInput [formControl]="myControl2" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option2 of filteredOptions2 | async" [value]="option2">
        {{ option2 }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

My question is: Why input work like one and display only one array? In this link you can see my problem.

https://stackblitz.com/edit/angular-yw23zr-u25rqk?file=app%2Fautocomplete-filter-example.html

Please if have some idea, I want to help me. Thank you

Pierre Mallet Pierre Mallet · Accepted Answer · 2018-02-08T16:45:38

You need to have different template reference for your different autocomplete.

your need <mat-autocomplete #auto="matAutocomplete"> / <mat-autocomplete #auto1="matAutocomplete"> and <mat-autocomplete #auto2="matAutocomplete">

and [matAutocomplete]="auto" [matAutocomplete]="auto1" [matAutocomplete]="auto2"

In your example, you use the reference #auto multiple times, so it keeps the last autocomplete as reference ( that why you see the same list three times).

Plus you have some typo in your example :

1/ your have this block twice

 this.filteredOptions1 = this.myControl1.valueChanges
      .pipe(
      startWith(''),
      map(val => this.filter1(val))
 );

2/ your filter2 value is based upon this.value1 for filtering instead of this.option2

Here is the forked stackblitz

Filter autocomplete Material. Some input form work like one input

1 Answers