如何使用 jquery 带来 ajax 搜索 onkeyup答案

【问题标题】：How to bring ajax search onkeyup with jquery如何使用 jquery 带来 ajax 搜索 onkeyup
【发布时间】：2011-04-12 14:37:33
【问题描述】：

我调用 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 关键字的结果来了。

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

【问题讨论】：

几个指针。首先，语言是 javascript 的弃用属性。在 HTML(5) 中，您可以关闭该属性，或使用 type="text/javascript"。其次，您使用的是 jQuery，那么当您也可以使用 jQuery 来执行此操作时，为什么还要进行内联函数调用呢？ $(function(){ $("#sample_search").keyup(function() {
只是为了从下到上提出建议JQuery UI 内置了一个有用的自动完成功能。我花了 15/20 分钟的谷歌搜索找到正确的教程组合来找到我想要的。对于那些希望与数据库交互的人，this 是一个不错的指南。

标签： javascript jquery ajax

【解决方案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 变量以防止向服务器发送多个不必要的请求。

【讨论】：

但这会导致对服务器的多个请求。假设我正在输入“test”，在这种情况下 sample.php 仍然被调用了四次 - 每个字母表对应一个“test”导致不需要的服务器负载。还有其他方法可以避免这种情况吗？
有人可以向我解释$searchRequest实际上是如何防止多个不必要的请求的吗？这适用于哪种情况？谢谢

【解决方案2】：

保留$.ajax() 返回的XMLHttpRequest 对象，然后在下一次键入时调用.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
        }
    });
}

【讨论】：

这虽然不是直接回答问题，但也解决了多AJAX请求的另一个大问题。

【解决方案3】：

尝试使用jQuery UI autocomplete。使您免于许多低级编码。

【讨论】：

【解决方案4】：

首先，我会建议对每个 keyup 进行 ajax 调用是不好的（这就是你遇到这个问题的原因）。

其次，如果您想使用 keyup，则在输入框后显示加载图像以向用户显示其仍在加载（使用加载图像，就像添加评论一样）

【讨论】：

【解决方案5】：

几个指针。首先，语言是 javascript 的弃用属性。在 HTML(5) 中，您可以关闭该属性，或使用 type="text/javascript"。其次，您使用的是 jQuery，为什么您也可以使用 jQuery 进行内联函数调用？

$(函数(){ // 文档准备好 $("#sample_search").keyup(function() { $.ajax({ 类型：“获取”，网址：“sample.php”，数据：{'search_keyword'：值}，数据类型：“文本”，成功：功能（味精） { //这里接收搜索结果 } }); }); });

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

【讨论】：