jQuery Live Search keyup 显示加载

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