Question

我一直在各处搜索，只是没有看到有人这样做 - 是否有可能使用jQuery 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

精灵的优秀js版本：http://fgnass.github.com/spin.js/

Answer 4

CSS解决方案

如果loading元素是输入控件的兄弟，则可以使用CSS通用兄弟组合子（〜）：

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

Working example
Alternate (jQuery) solution

Answer 5

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;

}

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

5 个答案: