Adding preloader to jquery autocomplete

I use jquery autocomplete to retrieve a list of parameters from mysql database and display them when searching. But sometimes it takes a minute, so I want to add a small preload gif when I enter a search query. I searched google here too and did not find the answer I need. If someone can help, it will be very helpful! 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 extracting the array from the database and outputting it, here is the code for this:

    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" >
+3
source share
1 answer

in your css add this:

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

img/indicator.gif , right left, ,

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);
        } 
+4

All Articles