Add autocomplete example to chips documentation.

[topherfangio]

Bug, feature request, or proposal:

Feature request.

What is the expected behavior?

In order to better understand the interaction between components, users want an example of how to utilize the MdAutocomplete with the MdChipList.

What is the current behavior?

There is no current example.

What are the steps to reproduce?

N/A

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: http://plnkr.co/edit/o077B6uEiiIgkC0S06dd

N/A

What is the use-case or motivation for changing an existing behavior?

N/A

Which versions of Angular, Material, OS, browsers are affected?

All

Is there anything else we should know?

[JakobSegerslatt]

I did this by adding the autocomplete inside a disabled md-basic-chip since i wanted it to wrap properly and be a part of the list.

Then the autocomplete just adds to the "chips"-list on select, but that logic exists in the current autocomplete doc.

<md-chip-list>
      <md-chip *ngFor="let chip of chips">
        <span>{{ chip .Name }}</span>
        <span (click)="removeChip(chip )">x</span>
      </md-chip>

      <md-basic-chip disabled="true">
         // insert autocomplete example here.
      </md-basic-chip>
</md-chip-list>

[topherfangio]

@JakobSegerslatt Indeed, with a disabled set of chips, this is definitely achievable. The difficulty comes in when you want to allow users to select from the autocomplete, or add their own via the forthcoming mdChipInput.

I'm currently working on adding this functionality, but we need to discuss how to handle component interoperability. Particularly:

1. How do we handle keyboard navigation? Right now, both the Autocomplete and the Chips watch for LEFT/RIGHT/UP/DOWN and it causes conflicts.

2. The Autocomplete automatically updates the attached input with the selected value, but it doesn't fire the ENTER keypress which would trigger the (chipAdded) event. And oddly, the Autocomplete's (select) event is emitted before the input value is updated, so it there is not currently a way to add the chip properly without a setTimeout() :-/

We're looking at how to best address these issues before moving forward. Also, I'm waiting until #2476 gets merged as it contains many updates including the mdChipInput directive.

[spencerolsen]

Is this something that will be implemented in the near future? And updates on the progress?

[webmutation]

What is the status of this? I could not find an example yet or a PR that closes this issue.

[JakobSegerslatt]

You can now place a chiplist inside a md-input-container/md-form-field. Have a look at the examples at https://material2-dev.firebaseapp.com/chips
Src at: https://github.com/angular/material2/tree/master/src/demo-app/chips

Havn't tested adding autocomplete to the form-field but it shouldn't be a problem.

[visurel]

Having an example with autocomplete would definitely still be helpful. It's possible, but it's unclear on how to structure it correctly and how to use a formControl with it.

[chriszrc]

With the addition of the md-input-container/md-form-field support, would it be possible to combine the chips with a md-select (multi)?

[henryavila]

This is really nedded.
I need a implementation of a Contact Chips like in version 1: https://material.angularjs.org/1.1.2/demo/chips#contact-chips

It would be great if the Material2 implements a contact-chips. Don't need to be exactly like the older, but has the same idea.

[axtho]

Here is a way towards a solution (it is very basic), until there is an official one: https://angular-material2-issue-v5gpri.stackblitz.io . Maybe it can help someone get started.

https://stackblitz.com/edit/angular-material2-issue-v5gpri

[chriszrc]

Nice! Ha! I ended up doing something similar, I needed chips with multiselect, and I put the select below the chips, and made the value of the select hidden, and then synced the chips model with the selections from the multiselect

[axtho]

@chriszrc did you hide the input value of the matInput? If so, how? Been trying to do this via ViewChild, but no luck.

[axtho]

This also works, expect that you would need to unset the focus of the input field so you can activate the autocomplete again:

       <mat-form-field floatPlaceholder="never">
            <mat-chip-list #chipList>
                <mat-chip *ngFor="let value of statusSelected" (remove)="removeStatus(value)">
                    {{value}} <mat-icon matChipRemove>cancel</mat-icon>
                </mat-chip>
                <input [matChipInputFor]="chipList"
                       [matAutocomplete]="auto">
            </mat-chip-list>
            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="addStatus($event)">
                <mat-option *ngFor="let state of status" [value]="state.id">
                    <span>{{ state.name }}</span>
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>