JSFiddle - React, Tailwind, and code Playground

HTML

<form id="search" name="search">
    <input name="test" type="text" />
    <input name="testtwo1" type="text" value="longdatalongdatalongdatalongdatalongdatalongdatalongdatalongdata" />
    <input name="testtwo2" type="text" value="longdata" />
    <input name="testtwo3" type="text" value="longdata" />
    <input name="testtwo4" type="text" value="longdata" />
    <input name="testtwo5" type="text" value="longdata" />
    <input name="testtwo6" type="text" />
    <input name="testtwo7" type="text" />
    <input name="testtwo8" type="text" />
    <input name="testtwo9" type="text" />
    <input name="testtwo10" type="text" />
    <input name="testtwo11" type="text" />
    <input name="testtwo12" type="text" />
    <input name="testtwo13" type="text" />
    <input name="testtwo14" type="text" />
    
    <input name="testcheckbox" type="checkbox" />
</form>
<span class="count"></span>

JavaScript

var filterCandidates = function(form){
    //Previous request needs to be aborted.
    var request = $.ajax({
        type: 'POST',
        url: '/echo/json/',
        data: {
            json: JSON.stringify({
                count: 1
            })
        },
        success: function(data){
            if(typeof data !== 'undefined'){
                jQuery('.count').text(data.count)
                console.log(data.count);
            }
        }
    });
    return request;
};

//Filter candidates ajax
if(jQuery('#search').length > 0){
    var form = jQuery('#search'),
        request = false;

    jQuery(form).find(':input').change(function() {
        if(request && request.readyState !== 4){
            console.log('Abort!')
            request.abort();
        }
        request = filterCandidates(form);
    });
    
    request = filterCandidates(form);
}