JSFiddle - React, Tailwind, and code Playground

HTML

<p>Start Typing!</p>
<input type="text" id="textInput"></input>
<ul id="results"></ul>

JavaScript

var uniqueId = 0;
var searchWikipedia = function(term) {
    var handler = 'rxjscallback' + (uniqueId++),
        deferred = $.Deferred();
    $.ajax({
        url: 'http://en.wikipedia.org/w/api.php',
        data: {
            action: 'opensearch',
            search: term,
            format: 'json'
        },
        dataType: 'jsonp',
        jsonpCallback: handler,
        success: function(data) {
            var id = parseInt(/\d+/.exec(handler)[0]);
            if (uniqueId === id + 1) {
                deferred.resolve(data);
            }
        }
    });
    return deferred;
};

var throttleInput = function(element, onNext) {
    var delay = function(action) {
        return window.setTimeout(function() {
            action();
        }, 500);
    },
        cancelToken, onkeyup = function(event) {

            var content = element.val();
            window.clearTimeout(cancelToken);

            cancelToken = delay(function() {
                if (content === element.val() && content.length > 2) {
                    onNext(content);
                }
            });
        };

    element.keyup(onkeyup);
};
var textInput = $('#textInput')

,   onkeyup = function (event) {

    var term = textInput.val();

    searchWikipedia(term).done(function (data) {
        if (data && data.length === 2) {
            var ul = $('#results');

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

throttleInput(textInput, onkeyup);