CSS 使用 jQuery-ui 自动完成显示微调器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2519513/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display spinner with jQuery-ui autocomplete
提问by Ciel
I've been searching all over the place and just don't see anyone doing it - Is it possible to have some kind of spinner/loader with a jQuery UI Autocomplete? (1.8) while data is being fetched?
我一直在到处搜索，只是没有看到有人这样做 - 是否有可能有某种带有 jQuery UI 自动完成功能的微调器/加载器？(1.8) 在获取数据时？
回答by stefann
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:
我的解决方案是使用 .ui-autocomplete-loading CSS 类，该类在 ajax GET 请求正在进行时在输入元素上添加和删除：
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.
当然，这不是一个非常灵活的解决方案，因为您无法在输入元素之外显示微调器，但在我的情况下，这正是我正在寻找的 UX。
回答by woolyninja
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
v1.8 及以下
$( ".selector" ).autocomplete({
search: function(event, ui) {
$('.spinner').show();
},
open: function(event, ui) {
$('.spinner').hide();
}
});
v1.9 and up
v1.9 及更高版本
$( ".selector" ).autocomplete({
search: function(event, ui) {
$('.spinner').show();
},
response: function(event, ui) {
$('.spinner').hide();
}
});
回答by Salman A
CSS Solution
CSS 解决方案
If the loading element is a sibling of the input control then CSS general sibling combinator (~) can be used:
如果加载元素是输入控件的同级元素，则可以使用 CSS 通用同级组合符 (~)：
.loading {
/* whatever */
}
#autocomplete.ui-autocomplete-loading ~ .loading {
background-image: url(loading.gif);
}
回答by dmukherjee
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;
}
