当前位置：文江博客话题详情

显示带有 jQuery-ui 自动完成功能的微调器

发布于 2024-08-27 07:43:15 字数 81 浏览 3 评论 0原文

我一直在到处搜索，但没有看到有人这样做 - 是否有可能拥有某种带有 jQuery UI 自动完成功能的旋转器/加载器？ (1.8) 获取数据时？

原文

分享到QQ

分享到微博

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

发布评论

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

雄赳赳气昂昂 2024-09-03 07:43:16

CSS 解决方案

如果加载元素是输入控件的同级元素，则可以使用 CSS 通用同级组合符 (~)：

.loading {
    /* whatever */
}
#autocomplete.ui-autocomplete-loading ~ .loading {
    background-image: url(loading.gif);
}

工作示例
替代 (jQuery) 解决方案

CSS Solution

If the loading element is a sibling of the input control then CSS general sibling combinator (~) can be used:

.loading {
    /* whatever */
}
#autocomplete.ui-autocomplete-loading ~ .loading {
    background-image: url(loading.gif);
}

Working example
Alternate (jQuery) solution

回复收藏 0 原文

过潦 2024-09-03 07:43:16

input[type='text'].ui-autocomplete-loading {

background:  url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif')          no-repeat
 right center;

}

input[type='text'].ui-autocomplete-loading {

background:  url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif')          no-repeat
 right center;

}

回复收藏 0 原文

梦过后 2024-09-03 07:43:15

我的解决方案是使用 .ui-autocomplete-loading CSS 类，该类在 ajax GET 请求正在进行时在输入元素上添加和删除：

input[type='text'].ui-autocomplete-loading {
    background: url('/icons/loading.gif') no-repeat right center;
}

当然这不是一个非常灵活的解决方案，因为您无法在输入之外显示微调器元素，但就我而言，这正是我正在寻找的用户体验。

My solution was to use the .ui-autocomplete-loading CSS class that gets added and removed on the input element while the ajax GET request is in process:

input[type='text'].ui-autocomplete-loading {
    background: url('/icons/loading.gif') no-repeat right center;
}

Granted it's not a very flexible solution since you can't display the spinner outside the input element but in my case it's exactly the UX I was looking for.

回复收藏 0 原文

浮萍、无处依 2024-09-03 07:43:15

您应该能够在具有自动完成功能的字段旁边放置一个旋转图像，并最初将其隐藏。然后使用回调函数隐藏/显示它。

然后使用搜索选项显示微调器并打开以隐藏它：

v1.8 及以下

$( ".selector" ).autocomplete({
   search: function(event, ui) { 
       $('.spinner').show();
   },
   open: function(event, ui) {
       $('.spinner').hide();
   }
});

版本 v1.9 及以上版本

$( ".selector" ).autocomplete({
   search: function(event, ui) { 
       $('.spinner').show();
   },
   response: function(event, ui) {
       $('.spinner').hide();
   }
});

You should be able to put a spinner image next to the field with the autocomplete and hide it initially. Then use the callback functions to hide/show it.

Then use the search option to show the spinner and open to hide it:

v1.8 and below

$( ".selector" ).autocomplete({
   search: function(event, ui) { 
       $('.spinner').show();
   },
   open: function(event, ui) {
       $('.spinner').hide();
   }
});

v1.9 and up

$( ".selector" ).autocomplete({
   search: function(event, ui) { 
       $('.spinner').show();
   },
   response: function(event, ui) {
       $('.spinner').hide();
   }
});

回复收藏 0 原文

~没有更多了~