JSFiddle - React, Tailwind, and code Playground

by mattpodwysocki

HTML

<script src="http://reactive-extensions.github.com/rxjs-html/rx.min.js"></script>
<script src="http://reactive-extensions.github.com/rxjs-html/rx.jquery.js"></script>
<script src="http://reactive-extensions.github.com/rxjs-html/rx.time.min.js"></script>
<p>Start Typing!</p>
<input type="text" id="textInput"></input>
<ul id="results"></ul>

JavaScript

var searchWikipedia = function(term) {
    return $.ajaxAsObservable({
        url: 'http://en.wikipedia.org/w/api.php',
        data: {
            action: 'opensearch',
            search: term,
            format: 'json'
        },
        dataType: 'jsonp'
    }).select(function(results) {
        return results.data;
    });
};

var input = $('#textInput');
var keyup = input.keyupAsObservable().select(function(ev) {
    return input.val();
}).where(function(text) {
    return text.length > 2;
}).throttle(500);

var searcher = keyup.select(function(text) {
    return searchWikipedia(text);
}).switchLatest().where(function(data) {
    return data.length === 2;
});

searcher.subscribe(function(data) {
    var ul = $('#results'),
        results = data[1];

    ul.empty();
    $.each(results, function(index, value) {
        $('<li>' + value + '</li>').appendTo(ul);
    });
});