pchi · April 19, 2015 20:03
diff --git a/gistfile1.js b/gistfile1.js
 <!DOCTYPE html>
 <html>
 
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.25/rx.all.js"></script>    
    <script src="script.js"></script>
 
  </head>
 
  <body>
    <button id="searchButton">Search</button>
    <div id="searchForm" style="display:none">
      <input id="textbox">
      <textarea id="results">
        
      </textarea>
      <button id="closeButton">Close</button>
    </div>
  </body>
 
 </html>




 // Code goes here
 window.onload = function() {
  var Observable = Rx.Observable;
  var textbox = document.getElementById('textbox');
  var keypresses = Observable.fromEvent(textbox, 'keypress');
  var results = document.getElementById('results');
  var searchButton = document.getElementById('searchButton');
  var searchButtonClicks = Observable.fromEvent(searchButton, 'click');
  
  function getWikipediaSearchResults(term) {
    return Observable.create(function forEach(observer) {
        var cancelled = false;
        var url = 'http://en.wikipedia.org/w/api.php?action=opensearch&format=json&search='
        + encodeURIComponent(term) + '&callback=?';
        $.getJSON(url, function(data) {
          if (!cancelled) {
            observer.onNext(data[1]);
            observer.onCompleted();
          }
        });
        
        return function dispose() {
          cancelled = true;
        };
      });
  }
 
  searchButtonClicks.forEach(function() {
    document.getElementById('searchForm').style.display = "block";
  });
  
  //[1,2,3].map(x => [x]) -> [[1],[2],[3]]
  
  var searchResultSets = 
    searchButtonClicks.
      map(function() {
        var closeClicks = Observable.fromEvent(document.getElementById('closeButton'), 'click');
        return keypresses.
          // {.'a'..'b'.......'c'..'d'.....
          throttle(20).
          // {...........'b'............'d'.....
          map(function(key) {
            return textbox.value;
          }).
          // {...........'ab'.....'ab'....'abc'..
          distinctUntilChanged().
          // {...........'ab'.............'abc'
          map(function(search){
             return getWikipediaSearchResults(search).retry(3);
          }).
          switchLatest().
          takeUntil(closeClicks)
          // {........................................["abacus"]...
      }).
      switchLatest();
      
  searchResultSets.forEach(
    function(resultSet) {
      results.value = JSON.stringify(resultSet);
    },
    function(error) {
      alert('Not working. Try again later.')
    });
 }
	<!DOCTYPE html>
	<html>

	<head>
	<link rel="stylesheet" href="style.css">
	<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.25/rx.all.js"></script>
	<script src="script.js"></script>

	</head>

	<body>
	<button id="searchButton">Search</button>
	<div id="searchForm" style="display:none">
	<input id="textbox">
	<textarea id="results">

	</textarea>
	<button id="closeButton">Close</button>
	</div>
	</body>

	</html>




	// Code goes here
	window.onload = function() {
	var Observable = Rx.Observable;
	var textbox = document.getElementById('textbox');
	var keypresses = Observable.fromEvent(textbox, 'keypress');
	var results = document.getElementById('results');
	var searchButton = document.getElementById('searchButton');
	var searchButtonClicks = Observable.fromEvent(searchButton, 'click');

	function getWikipediaSearchResults(term) {
	return Observable.create(function forEach(observer) {
	var cancelled = false;
	var url = 'http://en.wikipedia.org/w/api.php?action=opensearch&format=json&search='
	+ encodeURIComponent(term) + '&callback=?';
	$.getJSON(url, function(data) {
	if (!cancelled) {
	observer.onNext(data[1]);
	observer.onCompleted();
	}
	});

	return function dispose() {
	cancelled = true;
	};
	});
	}

	searchButtonClicks.forEach(function() {
	document.getElementById('searchForm').style.display = "block";
	});

	//[1,2,3].map(x => [x]) -> [[1],[2],[3]]

	var searchResultSets =
	searchButtonClicks.
	map(function() {
	var closeClicks = Observable.fromEvent(document.getElementById('closeButton'), 'click');
	return keypresses.
	// {.'a'..'b'.......'c'..'d'.....
	throttle(20).
	// {...........'b'............'d'.....
	map(function(key) {
	return textbox.value;
	}).
	// {...........'ab'.....'ab'....'abc'..
	distinctUntilChanged().
	// {...........'ab'.............'abc'
	map(function(search){
	return getWikipediaSearchResults(search).retry(3);
	}).
	switchLatest().
	takeUntil(closeClicks)
	// {........................................["abacus"]...
	}).
	switchLatest();

	searchResultSets.forEach(
	function(resultSet) {
	results.value = JSON.stringify(resultSet);
	},
	function(error) {
	alert('Not working. Try again later.')
	});
	}