将预加载器添加到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自动完成

回答

相关问题