Angular material autocomplete not working, no errors shown

Question

I've implemented my autocomplete, no errors, everything seems ok however absolutely nothing happens. I enter something in the input field and no action seems to happen, nothing is shown in the console.

HTML

  <form>
    <mat-form-field>
      <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
    </mat-form-field>

    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let n of testValues" [value]="n">
        {{n}}
      </mat-option>
    </mat-autocomplete>
  </form>

TS

import { MatAutocomplete } from '@angular/material/autocomplete';
import { FormControl } from '@angular/forms';
...
public testValues = ['one', 'two', 'three', 'four'];
public myControl: FormControl;
...
constructor() {
    this.myControl = new FormControl();
}

EDIT: I have imported

import {MatAutocompleteModule} from '@angular/material/autocomplete';

in my app module.

Version of material -

"@angular/material": "^5.0.0-rc.2",

Answer 1

You are missing a filter method in your .ts

You have to subscribe to your myControl valueChanges this way:

this.myControl.valueChanges.subscribe(newValue=>{
    this.filteredValues = this.filterValues(newValue);
})

So everytime your form control value changes you call your custom filterValues() method, that should look like:

filterValues(search: string) {
    return this.testValues.filter(value=>
    value.toLowerCase().indexOf(search.toLowerCase()) === 0);
}

So you use your testValues array as a base array, and your filteredValues array in your html:

<mat-option *ngFor="let n of filteredValues" [value]="n">
    {{n}}
</mat-option>

Filtering is not automatic, you have to use your custom method to filter the options. Hope it helps