如何使用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时,当两个keyup之间的ajax时间延迟有时会产生严重问题时,我会收到ajax结果.

当我te快速打字.ajax搜索t关键字来得晚,比较时te.我不知道如何处理这类案件.

结果te由于ajax延迟 而快速输入关键字.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添加了该变量以防止对服务器发出多个不必要的请求.

Answer 2

保持返回的XMLHttpRequest对象,$.ajax()然后在下一个键盘上,调用.abort().这应该会杀死之前的ajax请求并允许你执行新的请求.

var req = null;

function search_func(value)
{
    if (req != null) req.abort();

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

Answer 3

尝试使用jQuery UI 自动完成功能。使您免于进行许多低级编码。