jQuery Live Search keyup show loading

Question

I am trying to display a loading animation and hide the search input box before the ajax request has been sent, the ".se-pre-con" element is the loader.

As you can see below I am tring to show this in the beforeSend of the ajax request. However, when the user is typing in the search box then stops for the delay specified (1000ms) the input box still displays throughout the ajax request but it is unresponsive.

Then the results are returned, and the loading animation does the fadeOut so it the show() must be triggering but the page remains unchanged until the results are returned. I want to prevent the unresponsive page effect and show a loading animation during the request. Any help is much appreciated.

$(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

I found the solution.

Solution

It started working when I removed the option:

async: false