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

Dan*_*lba 56 jquery jquery-ui autocomplete jquery-plugins jquery-autocomplete

我正在使用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>
Run Code Online (Sandbox Code Playgroud)

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

Sam*_*son 158

autocomplete已经添加了ui-autocomplete-loading可用于此的类(在加载期间)...

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

  • 由于图像不在themeroller下载,请从此处获取:http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/images/ui-anim_basic_16x16.gif (5认同)
  • 我认为这是一个比接受的答案更好的解决方案,因为它解释了搜索没有返回任何结果的时间. (3认同)

Dal*_*len 47

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

其中CSS类工作定义如下:

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

编辑

Sam的答案是解决问题的更好方法

  • 使用ui-autocomplete-loading类更为可取,因为当没有返回结果时,此指示符会使用户感到困惑 (6认同)
  • 响应:function(){} - 搜索完成后触发 (2认同)