docs(autocomplete): copy over autocomplete example (#3340)

angular · Feb 28, 2017 · b062c9c · b062c9c
1 parent d1abc9e
commit b062c9c
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 0 deletions.
diff --git a/src/examples/autocomplete-overview-example.css b/src/examples/autocomplete-overview-example.css
diff --git a/src/examples/autocomplete-overview-example.html b/src/examples/autocomplete-overview-example.html
@@ -0,0 +1,9 @@
+<md-input-container>
+  <input mdInput placeholder="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>
diff --git a/src/examples/autocomplete-overview-example.ts b/src/examples/autocomplete-overview-example.ts
@@ -0,0 +1,77 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import 'rxjs/add/operator/startWith';
+
+@Component({
+  selector: 'autocomplete-overview-example',
+  templateUrl: './autocomplete-overview-example.html',
+})
+export class AutocompleteOverviewExample {
+  stateCtrl: FormControl;
+  filteredStates: 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',
+  ];
+
+  constructor() {
+    this.stateCtrl = new FormControl();
+    this.filteredStates = this.stateCtrl.valueChanges
+        .startWith(null)
+        .map(name => this.filterStates(name));
+  }
+
+  filterStates(val: string) {
+    return val ? this.states.filter((s) => new RegExp(val, 'gi').test(s)) : this.states;
+  }
+
+}