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

发布于 2024-10-08 14:59:36 字数 579 浏览 3 评论 0原文

我正在使用 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 返回内容中的用户列表。

原文

I'm using the jQuery AutoComplete plugin combined with ajax. Do you know how can I show a progress indicator while the ajax search is performed?

This is my current code.

<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>

The FindUsers URL returns a user list in the content.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

迟到的我 2024-10-15 14:59:36

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

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

autocomplete already adds the ui-autocomplete-loading class (for the duration of the loading) that can be used for this...

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

回复收藏 0 原文

森末i 2024-10-15 14:59:36

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

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

where CSS class working is defined as follow:

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

EDIT

Sam's answer is a better approach to address the problem

回复收藏 0 原文

看春风乍起 2024-10-15 14:59:36

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

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

If no results isn't works you can do this:

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

回复收藏 0 原文

~没有更多了~