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

【问题标题】：jQuery autocomplete: How to show an animated gif loading imagejQuery 自动完成：如何显示动画 gif 加载图像
【发布时间】：2011-05-28 05:43:24
【问题描述】：

我正在使用结合 ajax 的 jQuery AutoComplete 插件。您知道在执行 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 在内容中返回一个用户列表。

【问题讨论】：

您能否显示发送到浏览器的实际标记/代码，即没有那些 Ruby/ASP/whatever <% %> 标记？
@Marcel：我已经编辑了帖子
里面还有一个%>；是偶然的，还是这导致了问题？

标签： jquery jquery-ui jquery-plugins autocomplete jquery-autocomplete

【解决方案1】：

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

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

【讨论】：

当您使用 ThemeRoller 时，加载 gif 相关信息会从下载中删除。 bugs.jqueryui.com/ticket/6046
我认为这是一个比接受的答案更好的解决方案，因为它说明了搜索没有返回结果的情况。
由于图片不在主题滚轮下载中，请从这里获取：ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/…
FWIW 动画不适用于自动完成的基于本地（大）数组的源（加载异步）。大概是因为在搜索发生时，没有其他任何东西可以做任何事情。例如：jsbin.com/EmikobU/1/edit
@ChrisKimpton ：在您粘贴动画作品的 jsbin 中搜索时，我没有发现任何问题（使用最新的 FF）。

【解决方案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 是解决问题的更好方法

【讨论】：

使用 ui-autocomplete-loading 类更可取，因为当没有返回结果时，此指示器会一直困扰用户
response: function(){} - 搜索完成后触发

【解决方案3】：

如果没有结果无效，您可以这样做：

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

【讨论】：