Question

我正在尝试显示加载动画并在发送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();
        }
    });        
}
});

Answer 1

我找到了解决方案。

<强>解决方案

删除选项后，它开始工作了：

async: false

jQuery Live Search keyup show loading

1 个答案: