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

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

CSS 解决方案

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

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

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