jqueryオートコンプリートにプリローダを追加する

Question

Jqueryのオートコンプリートを使用して、mysqlデータベースからオプションのリストを取得し、検索時に出力します。しかし、時には1分ほどかかるので、検索クエリを入力するときに小さなプリロード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でこれを追加：

あなたはプリロードが

jsの左側になりたい場合は

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

あなたの画像プリロードパスでimg/indicator.gifを置き換える、あなたもleftでrightを変更することができます。

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