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

Question

我正在使用与ajax结合的jQuery自动完成插件。您知道如何在执行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>

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

- Daniel Peñalba

---

你能展示一下实际发送到浏览器的标记/代码吗？即没有那些 Ruby/ASP/任何 <% %> 标记的标记/代码？ - Marcel Korpel

它里面还有%>，这是意外发生了还是正是导致问题的原因？ - Marcel Korpel

Answer 1

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

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

- Sam Wilson

---

当您使用ThemeRoller时，与加载gif相关的信息会从下载中剥离出来。http://bugs.jqueryui.com/ticket/6046 - camainc

我认为这个答案比被采纳的答案更好，因为它考虑了搜索未返回结果的情况。 - space_balls

由于图片不在themeroller下载中，所以请从这里获取：http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/images/ui-anim_basic_16x16.gif - commonpike

就此而言，使用基于本地（大型）数组的源（异步加载）进行自动完成时，动画无法正常工作。这可能是因为在搜索发生时，没有其他操作可以执行。例如：http://jsbin.com/EmikobU/1/edit - Chris Kimpton

@ChrisKimpton：在你贴出的jsbin中，搜索时动画是正常的，我没有看到任何问题（使用最新的FF）。 - Wookie88

谢谢@Wookie88 - 也许我是在使用我的公司浏览器IE8 :( - Chris Kimpton

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的答案是解决这个问题的更好方法。

- Dalen

---

使用ui-autocomplete-loading类更可取，因为当没有返回结果时，该指示器会保持开启状态，从而使用户感到困惑。 - Nick Barrett

响应：function(){} - 在搜索完成后触发 - pszaba

Answer 3

如果没有结果，你可以这样做：

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

- David