chore: add option group demo

Author: crisbeto

src/demo-app/autocomplete/autocomplete-demo.html

@@ -40,6 +40,19 @@
     </md-card-actions>
 
   </md-card>
+
+  <md-card>
+    <div>Option groups (currentGroupedState): {{ currentGroupedState }}</div>
+
+    <md-input-container>
+      <input
+        mdInput
+        placeholder="State"
+        [mdAutocomplete]="groupedAuto"
+        [(ngModel)]="currentGroupedState"
+        (ngModelChange)="filteredGroupedStates = filterStateGroups(currentGroupedState)">
+    </md-input-container>
+  </md-card>
 </div>
 
 <md-autocomplete #reactiveAuto="mdAutocomplete" [displayWith]="displayFn">
@@ -53,4 +66,11 @@
   <md-option *ngFor="let state of tdStates" [value]="state.name">
     <span>{{ state.name }}</span>
   </md-option>
-</md-autocomplete>
+</md-autocomplete>
+
+<md-autocomplete #groupedAuto="mdAutocomplete">
+  <md-optgroup *ngFor="let group of filteredGroupedStates"
+    [label]="'States starting with ' + group.letter">
+    <md-option *ngFor="let state of group.states" [value]="state.name">{{ state.name }}</md-option>
+  </md-optgroup>
+</md-autocomplete>

src/demo-app/autocomplete/autocomplete-demo.scss

@@ -9,6 +9,8 @@
 
   .mat-input-container {
     margin-top: 16px;
+    min-width: 200px;
+    max-width: 100%;
   }
 }
 

src/demo-app/autocomplete/autocomplete-demo.ts

@@ -3,6 +3,16 @@ import {FormControl, NgModel} from '@angular/forms';
 import 'rxjs/add/operator/startWith';
 import 'rxjs/add/operator/map';
 
+interface State {
+  code: string;
+  name: string;
+}
+
+interface StateGroup {
+  letter: string;
+  states: State[];
+}
+
 @Component({
   moduleId: module.id,
   selector: 'autocomplete-demo',
@@ -13,6 +23,7 @@ import 'rxjs/add/operator/map';
 export class AutocompleteDemo {
   stateCtrl: FormControl;
   currentState = '';
+  currentGroupedState = '';
   topHeightCtrl = new FormControl(0);
 
   reactiveStates: any;
@@ -22,7 +33,9 @@ export class AutocompleteDemo {
 
   @ViewChild(NgModel) modelDir: NgModel;
 
-  states = [
+  groupedStates: StateGroup[];
+  filteredGroupedStates: StateGroup[];
+  states: State[] = [
     {code: 'AL', name: 'Alabama'},
     {code: 'AK', name: 'Alaska'},
     {code: 'AZ', name: 'Arizona'},
@@ -82,18 +95,41 @@ export class AutocompleteDemo {
         .startWith(this.stateCtrl.value)
         .map(val => this.displayFn(val))
         .map(name => this.filterStates(name));
+
+    this.filteredGroupedStates = this.groupedStates = this.states.reduce((groups, state) => {
+      let group = groups.find(g => g.letter === state.name[0]);
+
+      if (!group) {
+        group = { letter: state.name[0], states: [] };
+        groups.push(group);
+      }
+
+      group.states.push({ code: state.code, name: state.name });
+
+      return groups;
+    }, [] as StateGroup[]);
   }
 
   displayFn(value: any): string {
     return value && typeof value === 'object' ? value.name : value;
   }
 
   filterStates(val: string) {
+    return val ? this._filter(this.states, val) : this.states;
+  }
+
+  filterStateGroups(val: string) {
     if (val) {
-      const filterValue = val.toLowerCase();
-      return this.states.filter(state => state.name.toLowerCase().startsWith(filterValue));
+      return this.groupedStates
+        .map(group => ({ letter: group.letter, states: this._filter(group.states, val) }))
+        .filter(group => group.states.length > 0);
     }
 
-    return this.states;
+    return this.groupedStates;
+  }
+
+  private _filter(states: State[], val: string) {
+    const filterValue = val.toLowerCase();
+    return states.filter(state => state.name.toLowerCase().startsWith(filterValue));
   }
 }