终止所有正在进行的XHR请求

您必须首先进行检查，而不是进行筛选。此外，我建议使用setTimeout来减少服务器调用：

<section id="search-box">
     <form class="search-field">
         <input id="search" class="search-input" type="text"  value="Hello, I'm looking for..." />
     </form>
     <div class="search-results"></div>
</section>

var timer;
$('#search-box').keyup(function() { // bind the search data
    clearTimeout(timer);
    var input = $('.search-input').val();
    if (input.length < 3) {
        return;
    }
    timer = setTimeout(function () {
        $.getJSON({ // get JSON data
            url: 'http://test.sonsuzdongu.com/query.php?keyword=' + input,
            //pre-load
            beforeSend: function() {
                $(".search-lists").html("<span class='loading'><img src='_/images/loading.gif' /></span>");
            },
            success: function(data) { 
                var output = "<ul class='search-lists'>"; //output search data list
                $.each(data, function(key, val) {
                    output += '<li><a>' + val.term + '</a></li>';
                });
                output += '</ul>';
                $('.search-results').html(output);
                console.log('load ajax');
            }
        }); // JSON request
    }, 300); //setTimeout
}); // data bind

若要终止所有请求，您可以尝试重新加载页面（请求将终止于）。或者简单地添加一些标志，指示是否需要处理进一步的输出。

success: function (data) {
     if (!data.isEmptyObject()) {
         // do processing.
     }
}

有一个abort方法用于取消xhr请求。您可以根据自己的要求使用它。

只需像这样存储请求，然后您可以随时中止请求。

var request = null;
 ....
 ....
 function fetchJSON (){
    if(request != null) {
        request.abort();
    }
    request = $.getJSON({ // get JSON data
            url: 'example/query.php?keyword=' + input,
            //pre-load
            beforeSend: function() {
                $(".search-lists").html("<span class='loading'><img src='_/images/loading.gif' /></span>");
            },
            success: function(data) { 
                request = null;
                if (input.length >= 3) { // limit keyword to >=3
                    var output = "<ul class='search-lists'>"; //output search data list
                    $.each(data, function(key, val) {
                        output += '<li>';
                        output += '<a>' + val.term + '</a>';
                        output += '</li>';
                    });
                    output += '</ul>';
                    $('.search-results').html(output);
                    console.log('load ajax');
                } // end if
               else {
                    console.log('kill ajax');
               }
            }

        }); // JSON request
    }); // data bind
 }