如何使用jQuery实现 AJAX 搜索onkeyup

lg40wkob  于 2023-04-20  发布在  jQuery
关注(0)|答案(6)|浏览(137)
  • 我的脚本 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>

中文(简体)

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

***问题:***在onkeyup时我使用 AJAX 获取结果,一旦ajax结果延迟增加,我就会出现问题。
For ExampleWhile typing t keyword I AJAX result and while typing te I receive ajax result when ajax time delay between two keyup sometimes makes a serious problem.

当我快速输入te时 AJAX 搜索t关键字来晚了,当与te比较时。我不知道如何处理这种情况。

结果由于 AJAX 延迟,快速输入te关键字时,会出现t关键字的结果。

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

tyu7yeag

tyu7yeag1#

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

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变量是为了防止向服务器发送多个不必要的请求。

mzaanser

mzaanser2#

保留$.ajax()返回的XMLHttpRequest对象,然后在下一个keyup中调用.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
        }
    });
}
sg24os4d

sg24os4d3#

尝试使用jQuery UI autocomplete。从许多低级编码中节省您。

8hhllhi2

8hhllhi24#

首先,我建议在每个keyup上进行 AJAX 调用是不好的(这就是为什么你会遇到这个问题)。
第二,如果你想使用keyup,然后显示一个加载图像后,输入框向用户显示其仍在加载(使用加载图像,就像你在添加评论)

ar7v8xwq

ar7v8xwq5#

保留$. AJAX ()返回的XMLHttpRequest对象,然后在下一次keyup时调用.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){
                //

        }
    });
}
gwo2fgha

gwo2fgha6#

几个指针。首先,language是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 函数之间留一点延迟。你可以做的是在调用ajax函数之前使用setTimeout来检查用户是否已经完成输入。

相关问题