diff --git a/src/examples/autocomplete-overview-example.css b/src/examples/autocomplete-overview-example.css new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/examples/autocomplete-overview-example.html b/src/examples/autocomplete-overview-example.html new file mode 100644 index 000000000000..e5217f9c2f52 --- /dev/null +++ b/src/examples/autocomplete-overview-example.html @@ -0,0 +1,9 @@ + + + + + + + {{ state }} + + \ No newline at end of file diff --git a/src/examples/autocomplete-overview-example.ts b/src/examples/autocomplete-overview-example.ts new file mode 100644 index 000000000000..515e35e9e501 --- /dev/null +++ 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; + } + +}