Reactive Extensions for Javascript – Wikipedia lookup demo

Matthew Pod­wysoc­ki post­ed a cou­ple of very good arti­cles on RxJS on codebetter.com and amongst them was a sim­ple demo to do a look up on wikipedia using their open API:

Intro­duc­tion to the Reac­tive Exten­sions for JavaScript – Wikipedia Lookup

Unfor­tu­nate­ly, there wasn’t a live demo you can play around with and see it work, and since the arti­cle was post­ed things might have changed and doing cross-domain HTTP requests are no longer a straight­for­ward affair (at least not when it comes to Chrome and Fire­fox). If you had tried to piece togeth­er all the bits of code snip­pets from the arti­cle you might find that it only works in IE but not in Chrome or Fire­fox.

So I decid­ed to put togeth­er a work­ing demo, and with that, let’s start with the HTML from the orig­i­nal exam­ple:

   1: <body>

   2:     <div id="wrapper">

   3:         <input id="search-input" size="100" type="text" placeholder="Enter Search Phrase" />

   4:         <ul id="results" />

   5:         <p id="error" />

   6:     </div>

   7: </body>

And the Javascript which had been slight­ly mod­i­fied from those shown in the arti­cle:

   1: <script type="text/javascript">

   2:     function searchWiki(term) {

   3:         // note the callback=? clause at the end, which is required to make 

   4:         // cross-domain request possible in chrome and firefox

   5:         var url = "http://en.wikipedia.org/w/api.php?action=opensearch&search=" + 

   6:                     term + "&format=json&callback=?";

   7:  

   8:         // note that I'm using getJSONAsObservable instead of XMLHttpRequest

   9:         return $.getJSONAsObservable(url)

  10:                 .Select(function (result) {

  11:                     if (result.data && result.data.length == 2) {

  12:                         return result.data[1];

  13:                     }

  14:                     else {

  15:                         return [];

  16:                     }

  17:                 });

  18:     }

  19:  

  20:     $(function () {

  21:         var searcher = $("#search-input");

  22:  

  23:         var searchTerms = 

  24:             searcher.toObservable("keyup")     // hook up the keyup event on the search box

  25:                     .Throttle(250)             // ignore values entered within 250ms of each other

  26:                     .Select(function () {      // return what's in the search box

  27:                         return searcher.val();

  28:                     });

  29:  

  30:         var searchResults = searchTerms.Select(function (term) { return searchWiki(term); }).Switch();

  31:  

  32:         searchResults.Subscribe(function (data) {

  33:             $("#results").empty();

  34:             $.each(data, function (_, value) {

  35:                 $("#results").append("<li>" + value + "</li>");

  36:             })

  37:         }, function (errr) {

  38:             $("#error").html(error);

  39:         });

  40:     });

  41: </script>

Key things to note here:

  • line 6, at the end of the url I added &callback=? which is the stan­dard way to spec­i­fy a JSONP call­back with jQuery’s getJ­SON func­tion.
  • line 9, I used getJ­SONAsOb­serv­able, which is the same as getJ­SON but returns the val­ues as an observ­able sequence

Demo