src/components/search/livesearch.ts

   1 import {CORE_DIRECTIVES, Directive, View, EventEmitter, ElementRef} from 'angular2/angular2';
   2 import {Http} from 'angular2/http';
   3
   4 // RxJs
   5 import * as Rx from '@reactivex/rxjs/dist/cjs/Rx';
   6
   7 import {SearchService} from "./SearchService";
   8
   9 declare var zone: Zone;
  10
  11 @Directive({
  12     selector: 'input[type=text][mou-live-search]',
  13     outputs: ['results', 'loading'],
  14     providers: [CORE_DIRECTIVES, SearchService]
  15 })
  16 export class LiveSearch {
  17     results:EventEmitter = new EventEmitter();
  18     loading:EventEmitter = new EventEmitter();
  19
  20
  21     constructor(private el:ElementRef, public http:Http, public search:SearchService) {
  22
  23     }
  24
  25     onInit() {
  26         console.log("starting");
  27         (<any>Rx).Observable.fromEvent(this.el.nativeElement, 'keyup')
  28             .map(e => e.target.value)
  29             .filter(text => text.length > 0)
  30             .debounceTime(250)
  31             .distinctUntilChanged()
  32             .do(zone.bind(() => this.loading.next(true)))
  33             .flatMap(query => this.search.search(query))
  34             .do(zone.bind(() => this.loading.next(false)))
  35             .subscribe(
  36                 zone.bind(orgunits => {
  37                     this.results.next(orgunits);
  38                 }),
  39                 zone.bind(err => {
  40                     console.log(err);
  41                     this.results.next(['ERROR, see console']);
  42                 }),
  43                 () => {
  44                     console.log("complete");
  45                 }
  46             )
  47     }
  48 }
  49