why isn't the show in autocomplete source function not working?

Question

I have a show image inside my Jquery autocomplete source function and it isn't working.

I set a break point in the show inside my source function in chrome developer tools. The function is getting called but nothing is happening. The hide and show outside my autocomplete function works.

Here is my code.

echo '
<div id="divAuthorSearch" style="padding: 3px;"><img src="https://www.jqueryscript.net/images/jQuery-Ajax-Loading-Overlay-with-Loading-Text-Spinner-Plugin.jpg"/></div>
<script>
    $("#divAuthorSearch").hide();
    $("#divAuthorSearch").show();
</script>
<style>
       .ui-autocomplete {
            max-height: 200px;
            overflow-y: auto;
            /* prevent horizontal scrollbar */
            overflow-x: hidden;
            /* add padding to account for vertical scrollbar */
            padding-right: 20px;
        }
</style>
<script>
$("#authorname").autocomplete({
    minLength: 3,
    source: function(request, response){
        $("#divAuthorSearch").show();
        $.ajax({
            "url" :"/koauthor/SelectEmployee",
            "type" : "POST",
            "data" : JSON.stringify({"name": request.term}),
            "contentType" : "application/json",
            "success" : function(data) {
                response(data);
            },
            "error" : function(error)
            {
                alert("error: "+JSON.stringify("There was an error!"));
            }
        });
        $("#divAuthorSearch").hide();
    }
  }).focus(function(){
      $(this).autocomplete("search", "");
  });

The $("#divAuthorSearch").show(); inside my source function should show an image, then the image should hidden after $("#divAuthorSearch").hide(); is called.

ADyson · Accepted Answer · 2019-06-04T21:56:28.847

A couple of things:

1) I can't work out the purpose of

<script>
    $("#divAuthorSearch").hide();
    $("#divAuthorSearch").show();
</script>

...why hide something instantly the moment your page loads, and show it again instantly a moment later? The user probably won't even see it change and then change back again. But anyway the image will still be visible afterwards. I assume you want it hidden initially, so that when the autocomplete starts up it will then be displayed? If so then you don't need JS for that, just put a style of "display:none;" on the div tag itself, e.g:

<div id="divAuthorSearch" style="padding: 3px;display:none;">

2) The (other) reason you never see the image show and then hide once the autocomplete finishes is that you aren't actually waiting for the AJAX call to return the results before running the .hide() command. AJAX calls are asynchronous. This means that as soon as the $.ajax command is executed, the next line of JavaScript is immediately executed. It does not wait for the response. Instead the browser's network handling runs the request in the background, and executes the callback function which was passed to the "success" option once it gets a response from the server.

Therefore if you want your image to only hide once a response is received, you simply have to move the .hide() command into that function, so it waits to execute it instead of running it immediately:

source: function(request, response){
    $("#divAuthorSearch").show();
    $.ajax({
        "url" :"/koauthor/SelectEmployee",
        "type" : "POST",
        "data" : JSON.stringify({"name": request.term}),
        "contentType" : "application/json",
        "success" : function(data) {
            response(data);
            $("#divAuthorSearch").hide();
        },
        "error" : function(error)
        {
            alert("error: "+JSON.stringify("There was an error!"));
        }
    });
}

P.S. Here is a bit of background reading which you may find informative.

why isn't the show in autocomplete source function not working?

1 Answers1