將預加載器添加到jquery自動完成

我正在使用Jquery的自動完成從mysql數據庫中檢索選項列表並在搜索時輸出它們。但有時需要一分鐘，所以我想在輸入搜索查詢時添加一個小的預加載gif。我搜索谷歌和這裏，並沒有找到我需要的答案。如果有人可以幫助，將不勝感激！這裏是我的代碼：將預加載器添加到jquery自動完成

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" >

來源

2012-05-02 liveandream

在您的CSS添加此：

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

通過圖像預加載路徑替換img/indicator.gif，您還可以通過left，如果你想預載是在左側

JS改變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); 
     }

來源

2012-05-02 16:50:21 mgraph

沒有工作..我加入這到CSS和沒有發生在輸入字段..謝謝你的嘗試，但！ – liveandream

@liveandream看到更新anwser – mgraph

非常感謝你！工作完美:) – liveandream

將預加載器添加到jquery自動完成

回答

相關問題