title: why isn't the show in autocomplete source function not working?
body: <p>I have a show image inside my Jquery autocomplete source function and it isn't working.</p>
  
  <p>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. </p>
  
  <p>Here is my code.</p>
  
  <pre><code>echo '
  &lt;div id="divAuthorSearch" style="padding: 3px;"&gt;&lt;img src="https://www.jqueryscript.net/images/jQuery-Ajax-Loading-Overlay-with-Loading-Text-Spinner-Plugin.jpg"/&gt;&lt;/div&gt;
  &lt;script&gt;
      $("#divAuthorSearch").hide();
      $("#divAuthorSearch").show();
  &lt;/script&gt;
  &lt;style&gt;
         .ui-autocomplete {
              max-height: 200px;
              overflow-y: auto;
              /* prevent horizontal scrollbar */
              overflow-x: hidden;
              /* add padding to account for vertical scrollbar */
              padding-right: 20px;
          }
  &lt;/style&gt;
  &lt;script&gt;
  $("#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", "");
    });
  </code></pre>
  
  <p>The $("#divAuthorSearch").show(); inside my source function should show an image, then the image should hidden after $("#divAuthorSearch").hide(); is called.</p>