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

Question

我一直在到处搜索，只是没有看到有人这样做-是否可以使用带有 jQ​​uery UI 自动完成功能的某种微调器/加载器？(1.8) 在获取数据时？

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

CSS 解决方案

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

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

工作示例
替代（jQuery）解决方案

Answer 4

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;

}