Adding a preloader to jquery autocomplete

Question

I am using Jquery's autocomplete to retrieve a list of options from the mysql database and output them on search. But sometimes it takes a minute so I would like to add a small preloading gif when the search query is entered. I have searched google and here, and have not found the answer I need. If anyone could help that would be greatly appreciated! here is my code:

JQUERY:

<script>
$(document).ready(function() {
  $("#keywords").autocomplete({
    source: keywordList,
    minLength: 2,
    select: function(event, ui){
        $("#keywords").val(ui.item.value);
        } 
  });
});
</script>
<?php echo keywordArray(); ?> 

//This is retrieving the array from database and outputting it, here is the code to do that:

    function keywordArray()
{
  $rsKeywords = mysql_query("SELECT Destination FROM Destinations WHERE Country = 'Mexico'");

  $output = '<script>'."\n";
  $output .= 'var keywordList = [';

  while($row_rsKeywords = mysql_fetch_assoc($rsKeywords))
  {
    $output .= '"'.$row_rsKeywords['Destination'].'",';
  }

  $output = substr($output,0,-1); //Get rid of the trailing comma
  $output .= '];'."\n";
  $output .= '</script>';
  return $output;
}

HTML:

<input id="keywords" name="keywords" type="text" autocomplete="off" size="40" >

Answer 1

in your css add this:

.ui-autocomplete-loading { background:url('img/indicator.gif') no-repeat right center }

replace img/indicator.gif by your image preload path, you can also change right by left if you want the preload to be in the left side

js:

$("#keywords").autocomplete({
    source: keywordList,
    minLength: 2,

    search  : function(){$(this).addClass('ui-autocomplete-loading');},
    open    : function(){$(this).removeClass('ui-autocomplete-loading');},

    select: function(event, ui){
        $("#keywords").val(ui.item.value);
        }