docs(demo): add chips autocomplete example (#7830)

* docs(demo): add chips autocomplete example

* chore(nit): fix line break

* chore(nit): fix name

* chore(nit): updates per feedback

* chore: nit

* chore: pr feedback

src/lib/chips/chips.md

@@ -48,6 +48,9 @@ An example of chip input placed outside the chip-list element.
 </mat-form-field>
 ```
 
+An example of chip input with an autocomplete placed inside the chip-list element.
+<!-- example(chips-autocomplete) -->
+
 ### Keyboard interaction
 Users can move through the chips using the arrow keys and select/deselect them with the space. Chips
 also gain focus when clicked, ensuring keyboard navigation starts at the appropriate chip.

src/material-examples/chips-autocomplete/chips-autocomplete-example.css

@@ -0,0 +1,3 @@
+.demo-chip-list {
+  width: 100%;
+}

src/material-examples/chips-autocomplete/chips-autocomplete-example.html

@@ -0,0 +1,27 @@
+<mat-form-field class="demo-chip-list">
+  <mat-chip-list #chipList>
+    <mat-chip
+      *ngFor="let fruit of fruits"
+      [selectable]="selectable"
+      [removable]="removable"
+      (remove)="remove(fruit)">
+      {{fruit.name}}
+      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
+    </mat-chip>
+    <input
+      placeholder="New fruit..."
+      #fruitInput
+      [formControl]="fruitCtrl"
+      [matAutocomplete]="auto"
+      [matChipInputFor]="chipList"
+      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+      [matChipInputAddOnBlur]="addOnBlur"
+      (matChipInputTokenEnd)="add($event)"
+    />
+  </mat-chip-list>
+  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
+    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="option">
+      {{ fruit }}
+    </mat-option>
+  </mat-autocomplete>
+</mat-form-field>

src/material-examples/chips-autocomplete/chips-autocomplete-example.ts

@@ -0,0 +1,80 @@
+import {Component, ViewChild, ElementRef} from '@angular/core';
+import {MatChipInputEvent, MatAutocompleteSelectedEvent} from '@angular/material';
+import {ENTER, COMMA} from '@angular/cdk/keycodes';
+import {FormControl} from '@angular/forms';
+import {Observable} from 'rxjs/Observable';
+import {startWith} from 'rxjs/operators/startWith';
+import {map} from 'rxjs/operators/map';
+
+/**
+ * @title Chips Autocomplete
+ */
+@Component({
+  selector: 'chips-autocomplete-example',
+  templateUrl: 'chips-autocomplete-example.html',
+  styleUrls: ['chips-autocomplete-example.css']
+})
+export class ChipsAutocompleteExample {
+  visible: boolean = true;
+  selectable: boolean = true;
+  removable: boolean = true;
+  addOnBlur: boolean = false;
+
+  separatorKeysCodes = [ENTER, COMMA];
+
+  fruitCtrl = new FormControl();
+
+  filteredFruits: Observable<any[]>;
+
+  fruits = [
+    { name: 'Lemon' },
+  ];
+
+  allFruits = [
+    'Orange',
+    'Strawberry',
+    'Lime',
+    'Apple',
+  ];
+
+  @ViewChild('fruitInput') fruitInput: ElementRef;
+
+  constructor() {
+    this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
+        startWith(null),
+        map((fruit: string | null) => fruit ? this.filter(fruit) : this.allFruits.slice()));
+  }
+
+  add(event: MatChipInputEvent): void {
+    const input = event.input;
+    const value = event.value;
+
+    // Add our fruit
+    if ((value || '').trim()) {
+      this.fruits.push({ name: value.trim() });
+    }
+
+    // Reset the input value
+    if (input) {
+      input.value = '';
+    }
+  }
+
+  remove(fruit: any): void {
+    const index = this.fruits.indexOf(fruit);
+
+    if (index >= 0) {
+      this.fruits.splice(index, 1);
+    }
+  }
+
+  filter(name: string) {
+    return this.allFruits.filter(fruit =>
+        fruit.toLowerCase().indexOf(name.toLowerCase()) === 0);
+  }
+
+  selected(event: MatAutocompleteSelectedEvent): void {
+    this.fruits.push({ name: event.option.viewValue });
+    this.fruitInput.nativeElement.value = '';
+  }
+}