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

Posted 2023-03-05

【中文标题】jQuery 自动完成：如何显示动画 gif 加载图像

【英文标题】：jQuery autocomplete: How to show an animated gif loading image

【发布时间】：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：我已经编辑了帖子

里面还有一个%>；是偶然的，还是这导致了问题？

【参考方案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 类的工作定义如下：

.workingbackground: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