Добавление preloader в jquery autocomplete

Question

Я использую автозаполнение Jquery, чтобы получить список параметров из базы данных mysql и вывести их на поиск. Но иногда это занимает минуту, поэтому я хочу добавить небольшой предзагрузочный gif при вводе поискового запроса. Я искал google и здесь, и не нашел ответа, который мне нужен. Если кто-то может помочь, это будет очень полезно! Вот мой код:

Jquery:

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

// Это извлечение массива из базы данных и вывода его, вот код, чтобы сделать это:

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

в вашем css добавить это:

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

заменить img/indicator.gif ваших изображений натяга путем, вы можете также изменить right по left если вы хотите преднатяг быть в левой части

ЯШ:

$("#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); 
     }