Rx Js Basic

by Preetha Srinivasan

HTML

<script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.umd.js"></script>
Enter a search term : <input id="query" type = "text"/>
<ul id="results">

</ul>

CSS

#results {
  font-style:italic;
  color:blue;
}

JavaScript

var q = document.querySelector('#query');

var observable = Rx.Observable.fromEvent(q, 'keyup')
                   .debounce(() => Rx.Observable.timer(3000))
                   .map(function (ev) { return ev.target.value; })
                   .filter(function (text) { return text.length >= 3; })
                   .distinctUntilChanged()
                   .map(searchFor)
      
function searchFor(text){
  var results = [];
  for (var i = 0;i < 15;i++){
   results.push(text + ': ' + i);
  }
  return results;
}      
     
function append(val){
  val.forEach(function(item) {
    $("#results").append($("<li>").text(item));
  });
}     
var sub =  observable.subscribe(val => append(val));