0

我使用自动完成搜索框来搜索数据库并返回与搜索相关的用户。我使用 jquery ajax 来执行此操作。当keyup输入元素发生时，我将 ajax 请求发送到 `/ajax/search/ url，如下所示：

$("#search").keyup(function(){
    $(".itemSearch").remove();
    $(".notfound").hide();
    $("#searchResultSection").height("70px");
    if(!$("#search").val()){
        $("#searchResultSection").slideUp();
        $(".ajaxLogoSearch").hide();
        $(".notfound").hide();
    }
    else{
        var data = {
            query: $("#search").val()
        };
        $("#searchResultSection").slideDown();
        $(".ajaxLogoSearch").show();
        $.ajax({
            url: '/ajax/search',
            data: data,
            dataType:'json',
            success:function(result){
                if(result.found==0){
                    $(".ajaxLogoSearch").hide();
                    $(".notfound").show();
                }
                else{
                    var searchResult = $("#searchResultSection");
                    $(".ajaxLogoSearch").hide();
                   searchResult.css({"height":20});

                    for(var i=0;i<result.users.length;i++){
                        var content = '<div class="itemSearch">\
                <img src="../../static/social/images/defaultMaleImage.png" height="50px">\
                <p>'+ result.users[i].firstname+ ' '+ result.users[i].lastname +'</p>\
            </div>'
                        if(searchResult.height() < 370){
                            searchResult.height("+=70px");
                        }
                        $("#innerSearch").append(content);
                    }
                    $(".itemSearch").hover(function(){
                        $(this).css({"background":"rgb(55, 108, 221)"});
                    },function(){
                        $(this).css({"background":"#658be6"});
                    });
                }
            }

        });
    }
})

我的问题是当我立即输入 2 个字母时，发送了 2 个 ajax 请求，并且我在搜索结果框中看到了两次搜索结果。我想要一种方法来防止在第一个未完全完成时发送第 2 个 ajax 请求。我该怎么做？

编辑：我终于在代码项目网站上找到了解决方案，感谢您的回答。 这是解决方案的链接

4

2 回答 2

2

更好的方法是在用户停止输入之前不发送请求。这很容易使用 keydown 事件和等待 250 毫秒不活动的油门来完成。按照自己的方式进行操作将导致无法获得用户想要的结果。

$("#search").on("keydown",function(){
    var $this = $(this);
    clearTimeout($this.data("throttle"));
    $this.data("throttle",setTimeout(function(){
        doSearch.call($this.get(0),$this.val()); // perform the ajax search
    },250))
});

此外，在插入新结果时，将整个结果列表构建在一个变量中，然后在循环后使用 .html(thehtml) 一次将其全部插入。

于 2013-09-04T19:27:09.450 回答
0

您应该创建一个额外的可变类型的请求。此变量将是当前 ajax 请求的存储链接。当 keyup 事件再次触发时，您应该进行检查。

if(request) {
    request.abort();
}
request = $.ajax({/* */});

UPD1： 如果第一个 ajax 请求完成，您应该在成功回调中将请求变量设置为零。

UPD2：订阅更改事件更好

于 2013-09-04T19:31:07.790 回答