如何通过jquery进行ajax搜索onkeyup

小编典典

如何通过jquery进行ajax搜索onkeyup

ajax

我的脚本来调用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时间延迟有时引起严重问题时，我收到ajax结果。

当我te快速打字时。与相比，ajax搜索t关键字的时间晚了te。我不知道该如何处理这类案件。

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

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

阅读 463

2020-07-26

共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添加该变量是为了防止对服务器的多个不必要的请求。

2020-07-26