semi working live search
[u/erikhf/frm.git] / src / components / search / livesearch.ts
CommitLineData
690e4045 1import {Directive, View, EventEmitter, ElementRef} from 'angular2/angular2';
6e8d36df 2
690e4045
EHF
3// RxJs
4import * as Rx from '@reactivex/rxjs/dist/cjs/Rx';
6e8d36df 5
690e4045 6import {SearchService} from "./SearchService";
6e8d36df 7
690e4045
EHF
8declare var zone: Zone;
9
10@Directive({
11 selector: 'input[type=text][mou-live-search]',
12 outputs: ['results', 'loading'],
13 providers: [SearchService]
6e8d36df 14})
690e4045
EHF
15export 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 }
6e8d36df
EHF
48}
49