JQuery Live Search Keyup Показать загрузку

Я пытаюсь отобразить загрузочную анимацию и скрыть поле ввода поиска перед отправкой запроса ajax, элемент «.se-pre-con» является загрузчиком.

Как вы можете видеть ниже, я пытаюсь показать это в beforeSend ajax-запроса. Однако, когда пользователь вводит данные в поле поиска, затем останавливается на указанную задержку (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();
}
});
}
});