title: Implementing autocomplete
body: <p>I am having trouble finding a good autocomplete component for Angular2. Just anything that I can pass a list of key-label objects to and have a nice autocomplete on an <code>input</code> field.</p>
  
  <p>Kendo does not support Angular 2 yet and that it what we mostly use internally.  It doesn't appear that Angular Material supports Angular 2 yet either.</p>
  
  <p>Can anyone please point me in the right direction or let me know what they are using?</p>
  
  <p>This is what I built so far.  It's pretty bad and I'd like to find something that looks nice.</p>
  
  <pre class="lang-ts prettyprint-override"><code>import {Component, EventEmitter, Input, Output} from 'angular2/core';
  import {Control} from 'angular2/common';
  import {Observable} from 'rxjs/Observable';
  import {SimpleKeyValue} from '../models/simple-key-value'
  import 'rxjs/add/operator/map';
  import 'rxjs/add/operator/debounceTime';
  import 'rxjs/add/operator/distinctUntilChanged';
  
  @Component({
  selector: 'general-typeahead',
  template: ` &lt;div&gt;
              &lt;div class="input-group"&gt;
              &lt;input type="text" [ngFormControl] = "term" class="form-control" placeholder={{placeHolder}} &gt;
              &lt;/div&gt;
              &lt;ul&gt;
                  &lt;li class="item" *ngFor="#item of matchingItems" (click)="selectItem(item)"&gt;
                      {{item.value}}
                  &lt;/li&gt;
              &lt;/ul&gt;              
  &lt;/div&gt;`
  })
  
  export class GeneralTypeahead {
  
    matchingItems: Array&lt;SimpleKeyValue&gt;;
    term = new Control();
  
    @Input() allItems: Array&lt;SimpleKeyValue&gt;;
    @Input() placeHolder: string;
    @Output() onSelectItem = new EventEmitter&lt;SimpleKeyValue&gt;();
  
    constructor() {
      this.term.valueChanges
          .distinctUntilChanged()
          .debounceTime(200)
          .subscribe((term : string) =&gt; this.matchingItems = this.allItems.filter(sl =&gt; sl.value.toLowerCase().indexOf(term.toLowerCase()) &gt; -1));
    }
  
    selectItem(sl: SimpleKeyValue) {
      this.onSelectItem.emit(sl);
    }
  }
  </code></pre>