JSFiddle - React, Tailwind, and code Playground

by Maximilian Berghoff

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script>
<input type="text" id="input"/>

<h2>Results</h2>
<ul id="results">
</ul>

JavaScript

var $input = $('#input');
    var $results = $('#results');

    var suggestions = Rx.Observable.fromEvent($input, 'keyup')
        .pluck('target', 'value')
        .filter(function(text) { return text.length > 2 })
        .debounce(500 /* ms */)
        .distinctUntilChanged()
        .flatMapLatest(function (term) {
            return $.ajax({
                url: 'https://en.wikipedia.org/w/api.php',
                dataType: 'jsonp',
                data: {
                    action: 'opensearch',
                    format: 'json',
                    search: term
                }
            }).promise();
        })
			.subscribe(
        function(data) {
            $results
                .empty()
                .append($.map(data[1], function (value) {
                    return $('<li>').text(value);
                }))
        },
        function(error) {
            $results
                .empty()
                .append($('<li>'))
                .text('Error:' + error);
        }
    );