Css 使用jQuery ui自动完成显示微调器

我已经搜索了所有的地方，只是没有看到任何人这样做-有可能有某种带有jQuery UI自动完成的微调器/加载器吗？（1.8）在提取数据时？

您应该能够在具有自动完成功能的字段旁边放置微调器图像，并在开始时将其隐藏。然后使用回调函数隐藏/显示它

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

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();
   }
});

---

我的解决方案是使用.ui autocomplete加载CSS类，该类在ajax GET请求过程中在输入元素上添加和删除：

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

---

当然，这不是一个非常灵活的解决方案，因为您不能在输入元素外显示微调器，但在我的情况下，它正是我所寻找的用户体验。

CSS解决方案

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

。正在加载{
/*随便*/
}
#autocomplete.ui-autocomplete-loading~.loading{
背景图像：url（loading.gif）；
}

---

此解决方案的问题是，如果响应包含零结果，则微调器不会隐藏，因为在这种情况下不会生成open事件。不管结果计数如何，控件都应该真正有一个要调用的“搜索完成”事件。planning wiki引用了一个名为“response”的事件，但它似乎还没有实现。显然，jQuery UI 1.9包含了一个“open”问题事件的修复程序，这不是一个好主意。使用“response”的最佳方式，因为如果autocomplete没有返回任何数据，那么“open”就没有调用，但是“response”调用仍然是一种方式。在我的情况下，另一个答案不适用，因为我需要为父元素Brilliant设计样式！谢谢一直在寻找这么久，这是唯一一个给了我我想要的结果-即使在这么多年后！我试过了，几乎成功了。它将整个背景更改为微调器，当背景为不同颜色（即：蓝色背景上的白色文本框）时，这是不好的。我使用了以下内容：.ui自动完成加载{背景图像：url（'/Content/Images/ui-anim_basic_16x16.gif'）；背景重复：无重复；背景位置：右中心；}

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;

}