jQuery Live Search keyup show loading

时间:2015-03-08 12:23:33

标签: php jquery ajax keyup onkeyup

我正在尝试显示加载动画并在发送ajax请求之前隐藏搜索输入框,“。se-pre-con”元素是加载程序。

如下所示,我想在ajax请求的beforeSend中显示这一点。但是,当用户在搜索框中输入然后停止指定的延迟(1000毫秒)时,输入框仍然会在整个ajax请求中显示,但它没有响应。

然后返回结果,并且加载动画执行fadeOut,因此show()必须触发,但页面保持不变,直到返回结果。我想阻止无响应的页面效果并在请求期间显示加载动画。任何帮助深表感谢。

$(document).ready(function() {

var delay = (function() {
    var timer = 0;
    return function(callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})();

$('#search_field').keyup(function() {
    var target = $(this);
    delay(function() {
        getSearchResults(target.val());
    }, 1000);
});

function getSearchResults(str) {
    $.ajax({
        beforeSend: function(){
            $(".se-pre-con").show();
            $("#search_field").hide();
        },
        url: "http://example.com/Search_Results.php",
        dataType:"html",
        data: {"search_term": str},
        method: "post",
        async: false,
        success: function(data){
            if(data !== null) {
                $("#search_default").hide();
                $("#search_results_wrapper").html(data);
            }
            $(".se-pre-con").fadeOut("slow");
            $("#search_field").show();
            $("#search_field").focus();
        },
        error: function(){
            $(".se-pre-con").fadeOut("slow");
            $("#search_field").show();
            $("#search_field").focus();
        }
    });        
}
});

1 个答案:

答案 0 :(得分:0)

我找到了解决方案。

<强>解决方案

删除选项后,它开始工作了:

async: false