docs(demos): autocomplete examples (#5787)

Author: amcdnl

src/lib/autocomplete/autocomplete.md

@@ -43,6 +43,8 @@ local template variable (here we called it "auto"), and binding that variable to
 </md-autocomplete>
 ```
 
+<!-- example(autocomplete-simple) -->
+
 ### Adding a custom filter
 
 At this point, the autocomplete panel should be toggleable on focus and options should be selectable. But if we want 
@@ -61,41 +63,7 @@ Below we are also priming our value change stream with `null` so that the option
 This is especially helpful for screenreader users if you're using a non-standard filter that doesn't limit matches 
 to the beginning of the string.
 
-*my-comp.ts*
-```ts
-class MyComp {
-   myControl = new FormControl();
-   options = [
-    'One',
-    'Two',
-    'Three'
-   ];
-   filteredOptions: Observable<string[]>;
-
-   ngOnInit() {
-      this.filteredOptions = this.myControl.valueChanges
-         .startWith(null)
-         .map(val => val ? this.filter(val) : this.options.slice());
-   }
-   
-   filter(val: string): string[] {
-      return this.options.filter(option => new RegExp(`^${val}`, 'gi').test(option)); 
-   }
-}
-```
-
-*my-comp.html*
-```html
-<md-input-container>
-   <input type="text" mdInput [formControl]="myControl" [mdAutocomplete]="auto">
-</md-input-container>
-
-<md-autocomplete #auto="mdAutocomplete">
-   <md-option *ngFor="let option of filteredOptions | async" [value]="option">
-      {{ option }}
-   </md-option>
-</md-autocomplete>
-```
+<!-- example(autocomplete-filter) -->
 
 ### Setting separate control and display values
 
@@ -107,45 +75,7 @@ the option's string properties.
 To make this work, create a function on your component class that maps the control value to the desired display value. 
 Then bind it to the autocomplete's `displayWith` property. 
 
-```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">
-      {{ option.name }}
-   </md-option>
-</md-autocomplete>
-```
-
-*my-comp.ts*
-```ts
-class MyComp {
-   myControl = new FormControl();
-   options = [
-     new User('Mary'),
-     new User('Shelley'),
-     new User('Igor')
-   ];
-   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;
-   }
-}
-```
+<!-- example(autocomplete-display) -->
 
 
 #### Keyboard interaction:

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

@@ -0,0 +1,7 @@
+.example-form {
+  width: 500px;
+}
+
+.example-full-width {
+  width: 100%;
+}

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

@@ -0,0 +1,11 @@
+<form class="example-form">
+  <md-input-container class="example-full-width">
+    <input type="text" placeholder="Assignee" aria-label="Assignee" mdInput [formControl]="myControl" [mdAutocomplete]="auto">
+  </md-input-container>
+
+  <md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn">
+    <md-option *ngFor="let option of filteredOptions | async" [value]="option">
+      {{ option.name }}
+    </md-option>
+  </md-autocomplete>
+</form>

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

@@ -0,0 +1,47 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {Observable} from 'rxjs/Observable';
+import 'rxjs/add/operator/startWith';
+import 'rxjs/add/operator/map';
+
+export class User {
+  constructor(public name: string) { }
+}
+
+/**
+ * @title Display value autocomplete
+ */
+@Component({
+  selector: 'autocomplete-display-example',
+  templateUrl: 'autocomplete-display-example.html',
+  styleUrls: ['autocomplete-display-example.css']
+})
+export class AutocompleteDisplayExample {
+
+  myControl = new FormControl();
+
+  options = [
+    new User('Mary'),
+    new User('Shelley'),
+    new User('Igor')
+  ];
+
+  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 =>
+      option.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
+  }
+
+  displayFn(user: User): string {
+    return user ? user.name : user;
+  }
+
+}

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

@@ -0,0 +1,7 @@
+.example-form {
+  width: 500px;
+}
+
+.example-full-width {
+  width: 100%;
+}

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

@@ -0,0 +1,11 @@
+<form class="example-form">
+  <md-input-container class="example-full-width">
+    <input type="text" placeholder="Pick one" aria-label="Number" mdInput [formControl]="myControl" [mdAutocomplete]="auto">
+  </md-input-container>
+
+  <md-autocomplete #auto="mdAutocomplete">
+    <md-option *ngFor="let option of filteredOptions | async" [value]="option">
+      {{ option }}
+    </md-option>
+  </md-autocomplete>
+</form>

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

@@ -0,0 +1,38 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {Observable} from 'rxjs/Observable';
+import 'rxjs/add/operator/startWith';
+import 'rxjs/add/operator/map';
+
+/**
+ * @title Filter autocomplete
+ */
+@Component({
+  selector: 'autocomplete-filter-example',
+  templateUrl: 'autocomplete-filter-example.html',
+  styleUrls: ['autocomplete-filter-example.css']
+})
+export class AutocompleteFilterExample {
+
+  myControl: FormControl = new FormControl();
+
+  options = [
+    'One',
+    'Two',
+    'Three'
+  ];
+
+  filteredOptions: Observable<string[]>;
+
+   ngOnInit() {
+      this.filteredOptions = this.myControl.valueChanges
+         .startWith(null)
+         .map(val => val ? this.filter(val) : this.options.slice());
+   }
+
+    filter(val: string): string[] {
+      return this.options.filter(option =>
+        option.toLowerCase().indexOf(val.toLowerCase()) === 0);
+   }
+
+}

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

@@ -0,0 +1,7 @@
+.example-form {
+  width: 500px;
+}
+
+.example-full-width {
+  width: 100%;
+}

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

@@ -1,9 +1,21 @@
-<md-input-container>
-  <input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
-</md-input-container>
+<form class="example-form">
+  <md-input-container class="example-full-width">
+    <input mdInput placeholder="State" aria-label="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
+  </md-input-container>
 
-<md-autocomplete #auto="mdAutocomplete">
-  <md-option *ngFor="let state of filteredStates | async" [value]="state">
-    {{ state }}
-  </md-option>
-</md-autocomplete>
+  <md-autocomplete #auto="mdAutocomplete">
+    <md-option *ngFor="let state of filteredStates | async" [value]="state.name">
+      <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
+      <span>{{ state.name }}</span> | 
+      <small>Population: {{state.population}}</small>
+    </md-option>
+  </md-autocomplete>
+
+  <br />
+
+  <md-slide-toggle
+    [checked]="stateCtrl.disabled"
+    (change)="stateCtrl.disabled ? stateCtrl.enable() : stateCtrl.disable()">
+    Disable Input?
+  </md-slide-toggle>
+</form>

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

@@ -1,83 +1,59 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
 
+import {Observable} from 'rxjs/Observable';
 import 'rxjs/add/operator/startWith';
 import 'rxjs/add/operator/map';
 
 /**
- * @title Basic autocomplete
+ * @title Autocomplete overview
  */
 @Component({
   selector: 'autocomplete-overview-example',
   templateUrl: 'autocomplete-overview-example.html',
+  styleUrls: ['autocomplete-overview-example.css']
 })
 export class AutocompleteOverviewExample {
   stateCtrl: FormControl;
-  filteredStates: any;
+  filteredStates: Observable<any[]>;
 
-  states = [
-    'Alabama',
-    'Alaska',
-    'Arizona',
-    'Arkansas',
-    'California',
-    'Colorado',
-    'Connecticut',
-    'Delaware',
-    'Florida',
-    'Georgia',
-    'Hawaii',
-    'Idaho',
-    'Illinois',
-    'Indiana',
-    'Iowa',
-    'Kansas',
-    'Kentucky',
-    'Louisiana',
-    'Maine',
-    'Maryland',
-    'Massachusetts',
-    'Michigan',
-    'Minnesota',
-    'Mississippi',
-    'Missouri',
-    'Montana',
-    'Nebraska',
-    'Nevada',
-    'New Hampshire',
-    'New Jersey',
-    'New Mexico',
-    'New York',
-    'North Carolina',
-    'North Dakota',
-    'Ohio',
-    'Oklahoma',
-    'Oregon',
-    'Pennsylvania',
-    'Rhode Island',
-    'South Carolina',
-    'South Dakota',
-    'Tennessee',
-    'Texas',
-    'Utah',
-    'Vermont',
-    'Virginia',
-    'Washington',
-    'West Virginia',
-    'Wisconsin',
-    'Wyoming',
+  states: any[] = [
+    {
+      name: 'Arkansas',
+      population: '2.978M',
+      // https://commons.wikimedia.org/wiki/File:Flag_of_Arkansas.svg
+      flag: 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg'
+    },
+    {
+      name: 'California',
+      population: '39.14M',
+      // https://commons.wikimedia.org/wiki/File:Flag_of_California.svg
+      flag: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg'
+    },
+    {
+      name: 'Florida',
+      population: '20.27M',
+      // https://commons.wikimedia.org/wiki/File:Flag_of_Florida.svg
+      flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg'
+    },
+    {
+      name: 'Texas',
+      population: '27.47M',
+      // https://commons.wikimedia.org/wiki/File:Flag_of_Texas.svg
+      flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg'
+    }
   ];
 
   constructor() {
     this.stateCtrl = new FormControl();
     this.filteredStates = this.stateCtrl.valueChanges
         .startWith(null)
-        .map(name => this.filterStates(name));
+        .map(state => state ? this.filterStates(state) : this.states.slice());
   }
 
-  filterStates(val: string) {
-    return val ? this.states.filter(s => s.toLowerCase().indexOf(val.toLowerCase()) === 0)
-               : this.states;
+  filterStates(name: string) {
+    return this.states.filter(state =>
+      state.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
   }
 
 }

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

@@ -0,0 +1,7 @@
+.example-form {
+  width: 500px;
+}
+
+.example-full-width {
+  width: 100%;
+}