javascript - 如何使用 jquery 带来 ajax 搜索 onkeyup

Question

我调用 ajax 的脚本

<script language="javascript">
function search_func(value)
{
    $.ajax({
       type: "GET",
       url: "sample.php",
       data: {'search_keyword' : value},
       dataType: "text",
       success: function(msg){
                   //Receiving the result of search here
       }
    });
}
</script>

HTML

   <input type="text" name="sample_search" id="sample_search" onkeyup="search_func(this.value);">

问题: onkeyup 时我正在使用 ajax 获取结果。一旦 ajax 结果延迟增加，我就会遇到问题。

例如在键入 t 关键字时，我收到了 ajax 结果，而在键入 te 时，我收到了 ajax 结果当两个 keyup 之间的 ajax 时间延迟有时会成为一个严重的问题。

当我快速键入 te 时。与 te 相比，ajax 搜索 t 关键字来得晚。我不知道如何处理这种情况。

结果由于 ajax 延迟，快速键入 te 关键字时。 t 关键字的结果来了。

我相信我已经解释了读者的知识。

Answer 1

您应该检查该值是否随时间发生变化:

var searchRequest = null;

$(function () {
    var minlength = 3;

    $("#sample_search").keyup(function () {
        var that = this,
        value = $(this).val();

        if (value.length >= minlength ) {
            if (searchRequest != null) 
                searchRequest.abort();
            searchRequest = $.ajax({
                type: "GET",
                url: "sample.php",
                data: {
                    'search_keyword' : value
                },
                dataType: "text",
                success: function(msg){
                    //we need to check if the value is the same
                    if (value==$(that).val()) {
                    //Receiving the result of search here
                    }
                }
            });
        }
    });
});

编辑:

添加了 searchRequest 变量以防止对服务器发出多个不必要的请求。