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

【问题标题】：Display spinner with jQuery-ui autocomplete使用 jQuery-ui 自动完成显示微调器
【发布时间】：2010-03-25 21:24:37
【问题描述】：

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

【问题讨论】：

标签： css jquery-ui jquery-ui-autocomplete

【解决方案1】：

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

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

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

【讨论】：

我试过了，它几乎奏效了。它将整个背景更改为微调器，当背景为不同颜色时（即：蓝色背景上的白色文本框），这并不好。我使用了以下内容： .ui-autocomplete-loading { background-image: url('/Content/Images/ui-anim_basic_16x16.gif');背景重复：无重复；背景位置：右中心； }

【解决方案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();
   }
});

【讨论】：

此解决方案的问题是，如果响应包含零结果，则微调器不会隐藏，因为在这种情况下不会生成打开事件。无论结果计数如何，控件都应该真正具有要调用的“搜索完成”事件。计划 wiki wiki.jqueryui.com/w/page/12137709/Autocomplete 提到了这样一个称为“响应”的事件，但它似乎还没有实现。
显然 jQuery UI 1.9 包含对此问题的修复 bugs.jqueryui.com/ticket/6777
事件“打开” - 不是一个好主意。使用“响应”的最佳方式，因为如果自动完成没有返回任何数据，则“打开”没有调用，而是“响应”调用。
仍有待走的路。在我的情况下，其他答案不适用，因为我需要父元素的样式
太棒了！谢谢！找了这么久，这是唯一一个给了我想要的结果的人——即使在这么多年之后！

【解决方案3】：

CSS 解决方案

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

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

Working example
Alternate (jQuery) solution

【讨论】：

【解决方案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;

}

【讨论】：