Rx Js Switch map

by Preetha Srinivasan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.0-beta.9/Rx.umd.min.js"></script>
Using switch map <input class="search" id="searchSwitchMap"/>
<div class="results" id="resultsSwitchMap"></div>

Plain Vanilla Search <input class="search" id="search"/>
<div class="results" id="results"></div>

CSS

body{
  font-family: "Times New    Roman", Times, serif;
}

.results {
  margin-top:10px;
  margin-bottom:20px;
  color:blue;
  font-style:italic;
}

.search {
  margin-top:20px;
}

JavaScript

const search = val => new Promise(resolve => setTimeout(() => resolve(`Result ${val}`), 1000));

function usingSwitchMap() {
 var c = Rx.Observable.fromEvent($('#searchSwitchMap'),'keyup');
 var y = c.map(event => event.target.value).switchMap(search);
 y.subscribe(x => $('#resultsSwitchMap').html(x));
}

function withoutSwitchMap(){
  $('#search').keyup(e => {
    search(e.target.value)
      .then(data => $('#results').html(data));
  });
}

usingSwitchMap();
withoutSwitchMap();