[AngularJS + RxJS] Search with RxJS

When doing search function, you always need to consider about the concurrent requests. 

 

AEvent ----(6s)---> AResult

------(100ms)-------

BEvent -----(1s)---> BResult

 

It means A event needs to take 6 seconds to get the result, but B only need 1 second, in the between there is 100ms. 

So B result will appear on the DOM first, but later will be overwritten by A result once A finished. 

 

To overcome this problem, we can use RxJS:

class HelpSearchCtrl {
    constructor(HelpSearchService, $scope, $log) {
        this.HelpSearchService = HelpSearchService; 
        this.searchTerm = null;
        this.$log = $log;
        this.$scope = $scope;

        let listener = Rx.Observable.create( (observe)=>{
           
             this.$scope.$watch( ()=>{
                return this.searchTerm;
             }, ()=>{
                 observe.onNext(this.searchTerm);
             })
        })
        .debounce(500)
        .flatMapLatest( (searchTerm)=> {
            return Rx.Observable.fromPromise(this.doSearch(searchTerm));
        }).subscribe();

        this.$scope.$on('$destory', ()=>{
            this.$log.debug('cancelled!');
            listener.dispose();
        })
    } 

    doSearch(searchTerm) {
        return this.HelpSearchService.searchForContent(searchTerm);
    }
}

const clmHelpSearchDirective = () => {
    return {
        restrict: 'EA',
        scope: {},
        replace: true,
        template: require('./help-search.html'),
        controller: HelpSearchCtrl,
        controllerAs: 'vm',
        bindToController: true
    }
};

export default (ngModule)=> {
    ngModule.directive('clmHelpSearch', clmHelpSearchDirective);
}