title: Adding a preloader to jquery autocomplete
body: <p>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:</p>
  
  <p>JQUERY:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
    $("#keywords").autocomplete({
      source: keywordList,
      minLength: 2,
      select: function(event, ui){
          $("#keywords").val(ui.item.value);
          } 
    });
  });
  &lt;/script&gt;
  &lt;?php echo keywordArray(); ?&gt; 
  </code></pre>
  
  <p>//This is retrieving the array from database and outputting it, here is the code to do that:</p>
  
  <pre><code>    function keywordArray()
  {
    $rsKeywords = mysql_query("SELECT Destination FROM Destinations WHERE Country = 'Mexico'");
  
    $output = '&lt;script&gt;'."\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 .= '&lt;/script&gt;';
    return $output;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input id="keywords" name="keywords" type="text" autocomplete="off" size="40" &gt;
  </code></pre>