semi working live search
[u/erikhf/frm.git] / src / components / search / livesearch.ts
1 import {Directive, View, EventEmitter, ElementRef} from 'angular2/angular2';
2
3 // RxJs
4 import * as Rx from '@reactivex/rxjs/dist/cjs/Rx';
5
6 import {SearchService} from "./SearchService";
7
8 declare var zone: Zone;
9
10 @Directive({
11     selector: 'input[type=text][mou-live-search]',
12     outputs: ['results', 'loading'],
13     providers: [SearchService]
14 })
15 export class LiveSearch {
16     results: EventEmitter = new EventEmitter();
17     loading: EventEmitter = new EventEmitter();
18
19     constructor( private el: ElementRef, public search: SearchService){
20
21     }
22
23     onInit(){
24         console.log("starting");
25         (<any>Rx).Observable.fromEvent(this.el.nativeElement, 'keyup')
26             .map(e => e.target.value)
27             .filter(text => text.length > 2)
28             .debounceTime(250)
29             .distinctUntilChanged()
30             .do(zone.bind(() => this.loading.next(true)))
31             .flatMap(query => this.search.search(query))
32             .do(zone.bind(() => this.loading.next(false)))
33             .subscribe(
34                 zone.bind( orgunits => {
35                     //this.results.next(orgunits);
36                     console.log(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