JSFiddle - React, Tailwind, and code Playground

by Duc Nghiem Xuan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.5.2/rx.all.js"></script>
<h2>Without ReactiveX</h2>

<input type="text" name="suggestions" class="suggestionsinput" value="" />
<div id="suggestions">Suggestions for ...</div>
<br />

<h2>With ReactiveX</h2>

<input type="text" name="suggestions" class="suggestionsinputRx" value="" />
<div id="suggestionsRx">Suggestions for ...</div>

JavaScript

// normal
var input = $('.suggestionsinput');
var output = $('#suggestions');

var timeout = null;
var currentRequest = null;
input.keyup(function () {
    if (timeout) clearTimeout(timeout);
    if (currentRequest) currentRequest.abort();
    var text = input.val();
    timeout = setTimeout(function () {
        currentRequest = getResult(text)
            .done(function (result) {
            showResult(output, result);
        })
            .fail(function (jqXHR, status, error) {
                if (error === "abort") return;
                showResult(output, "There is some error");
        });
    }, 200);
});

// Rx
var inputRx = $('.suggestionsinputRx');
var outputRx = $('#suggestionsRx');

// use keyup event to detect backspace
var keyPressObservable = Rx.Observable.fromEvent(inputRx, 'keyup');
var requestObservable = keyPressObservable.throttle(200)
    .map(function (key) {
    return inputRx.val();
});
var responseObservable = requestObservable.flatMap(function (requestData) {
    return Rx.Observable.fromPromise(getResult(requestData))
        .takeUntil(keyPressObservable);
});

responseObservable.subscribe(function (result) {
    showResult(outputRx, result);
}, function () {
    showResult(outputRx, "There is some error");
});

// request to server
function getResult(text) {
    return $.ajax({
        url: '/echo/html/',
        data: {
            html: 'Suggestions for ' + text,
            delay: 2
        },
        method: 'POST'
    });
}

// render

function showResult(output, result) {
    output.text(result);
}