Question

我正在使用jQuery AutoComplete插件与ajax结合使用。你知道如何在执行ajax搜索时显示进度指示器吗？

这是我目前的代码。

<script type="text/javascript">
    $("#autocomplete-textbox").autocomplete('http://www.example.com/AutoComplete/FindUsers');
</script>

<div>
    <input type="text" id="autocomplete-textbox" />
    <span class="autocomplete-animation"><img id="ajaxanimation" src="../img/indicator.gif")"/></span>
</div>

FindUsers URL返回内容中的用户列表。

Answer 1

自动完成功能已经添加了ui-autocomplete-loading类（在加载期间），可用于此...

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

Answer 2

$("#autocomplete-textbox").autocomplete
(
search  : function(){$(this).addClass('working');},
open    : function(){$(this).removeClass('working');}
)

其中CSS类的工作定义如下：

.working{background:url('../img/indicator.gif') no-repeat right center;}

修改

Sam answer是解决问题的更好方法

Answer 3

如果没有结果不起作用，您可以这样做：

$("input[name='search']").autocomplete({
...,
select: function( event, ui ) {
action show image
}   
}).data( "autocomplete" )._renderItem = function( ul, item ) {
action hide image
}

jQuery自动完成：如何显示动画gif加载图像

3 个答案: