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时。与t相比，ajax搜索te关键字的时间较晚。我不知道如何处理这类案件。

结果由于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变量以防止对服务器发出多个不必要的请求。

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 autocomplete。为您节省许多低级编码。

Answer 4

首先我建议在每个keyup上进行ajax调用并不好（这就是为什么你在这个问题上运行）。

其次，如果你想使用keyup，那么在输入框之后显示一个加载图像，以向用户显示其仍然加载（使用加载图像，就像你开始添加评论一样）

Answer 5

几点指针。首先，语言是javascript的弃用属性。在HTML（5）中，您可以关闭该属性，或使用type =“text / javascript”。其次，您正在使用jQuery，那么为什么在使用jQuery时也可以使用内联函数调用？

$(function(){

   // Document is ready

   $("#sample_search").keyup(function()
   {

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

   });

});

我建议在keyup事件和调用ajax函数之间留一点延迟。您可以做的是使用setTimeout检查用户是否已完成输入，然后再调用您的ajax函数。

如何使用jquery带来ajax搜索关键字

5 个答案: