Value not displaying for Material2 Autocomplete

Question

I am trying to get the autocomplete to display one parameter of object but save another and so far it doesn't seem to be behaving.

Code is as per Material2 Autocomplete site: Autocomplete

The difference is that [value] i want to save 'option.Id' and not 'option'.

The error is that while it records the option.Id it doesn't actually display the value in input field (leaves it blank).

my-comp.html

<md-input-container>
   <input type="text" mdInput [formControl]="myControl" [mdAutocomplete]="auto">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn">
   <md-option *ngFor="let option of filteredOptions | async" [value]="option.Id">
      {{ option.name }}
   </md-option>
</md-autocomplete>

my-comp.ts

class MyComp implements OnInit {
   myControl = new FormControl();
   options = [
     new User('Mary', 1),
     new User('Shelley', 2),
     new User('Igor', 3)
   ];
   filteredOptions: Observable<User[]>;

   ngOnInit() { 
      this.filteredOptions = this.myControl.valueChanges
         .startWith(null)
         .map(user => user && typeof user === 'object' ? user.name : user)
         .map(name => name ? this.filter(name) : this.options.slice());
   }

   filter(name: string): User[] {
      return this.options.filter(option => new RegExp(`^${name}`, 'gi').test(option.name)); 
   }

   displayFn(user: User): string {
      return user ? user.name : user;
   }
}

class User {
name: string;
id: number;

constructor(name: string, id: number)
this.name = name;
this.id = id;
}

Answer 1

Try giving the autocomplete a model (example: myModel):

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn" [(ngModel)]="myModel">
   <md-option *ngFor="let option of filteredOptions | async" [ngValue]="option.Id">
      {{ option.name }}
   </md-option>
</md-autocomplete>

Here, [ngValue] gives myModel the value of option.Id.

When you retrieve the model myModel you will be getting option.Id.

If you need, you can help yourself by adding (ngModelChange)="onChange($event)" to your <md-autocomplete> in order to manipulate data in the component.

Answer 2

The problem is in displayFn function, where its expecting User object as a parameter, but you are passing user.id which is a number and because of the mismatch, not value is getting passed to the view.

I have a working exmaple in Plunker.

displayFn(userId: number) {
      return userId;
   }

Answer 3

you can filter from options by using displayWith of md-autocomplete to find user.name based on user.id which is binded to md-option, here you need to use bind(this) in order to access data of component.

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn.bind(this)">

and do filter at displayFn function

displayFn(id: number): string {
  if (!id) return '';
  let index = this.options.findIndex(option => option.id === id);

  return  index === -1 ? '' : this.options[index].name;
}

refer plunker demo.

Comment: in your template you are using Id but in your User class it's id. I think this may also cause blank to be set and if you correct this typo, user.id will be setted to md-input.