jquery ui-autocomplete-loading 类被添加但样式不适用答案

【问题标题】：jquery ui-autocomplete-loading class gets added but styles don't applyjquery ui-autocomplete-loading 类被添加但样式不适用
【发布时间】：2012-06-01 16:59:37
【问题描述】：

我正在使用 jquery ui 自动完成功能在我的网站上进行搜索。我想在返回结果时添加一个简单的加载微调器。加载结果时，jquery ui 会自动添加类“ui-autocomplete-loading”。我在这个类中添加了一些 CSS，以便在它处于活动状态时添加背景图像。奇怪的是，该类的添加和删除非常好，但没有应用样式。但是，如果我手动添加 ui-autocomplete-loading 类，则会显示样式。我一直在努力解决这个问题！

自动添加'ui-autocomplete-loading'

http://i.stack.imgur.com/DyLNj.jpg

手动添加'ui-autocomplete-loading'

http://i.stack.imgur.com/BReHS.png

CSS：

.ui-autocomplete-loading {
  background: red url('/static/images/ajax-loader.gif') no-repeat right center!important;
}

【问题讨论】：

自动添加类和手动添加类是什么意思？
自动表示 jquery ui 在加载搜索结果时正在添加类。手动是我自己将类添加到输入中。

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

【解决方案1】：

如果您查看 jQuery UI 脚本，您会看到自动应用了 .ui-autocomplete-loading 类。可以在您的 css 中覆盖此样式以显示您选择的图像或样式。

其中一个问题是 CSS 可能与您的其他样式发生冲突。您可以通过调试 DevTools、Firebug 等中的脚本，然后在应用元素样式时检查它们是否存在问题。

简单的解决方法是增加类的特异性。例如，在 CSS 中添加 input 元素可能会起到作用。 input.ui-autocomplete-loading { background:url('img/loading.gif') no-repeat right center; }

您可以在下面的示例中看到，我检查了 CSS 规则，发现 Foundation 框架中的样式覆盖了我的 .ui-autocomplete-loading 样式。我能够通过在调试脚本时取消选中样式来验证这一点。

所以，我修改了我的 CSS，你可以在这里看到更新的样式。

【讨论】：

【解决方案2】：

这里有点困难，因为您试图覆盖现有背景。

您可以在输入字段中添加一个按钮。然后，您可以为自动完成加载添加样式。只需使用负边距来定位图标。

例如

<input><button class="search_icon"><button></input>

.search_icon 
{
    margin-left: -20px;
    background: #fff url(/assets/images/search-icon.png) no-repeat;
    border-style: none;
    width: 15px;
}

.ui-autocomplete-loading
{
   background: #fff url(/assets/images/ajax-loader.gif) no-repeat 95%;  
}

【讨论】：

当我下载 jquery-ui 时，我没有在源代码中获得 assets/images 目录。

【解决方案3】：

这是 jquery-ui 本身在其网站上使用的代码 https://jqueryui.com/autocomplete/#remote.

确保图像目录包含“ui-anim_basic_16x16.gif”。

<style>

       .ui-autocomplete-loading {

       background: white url("/images/ui-anim_basic_16x16.gif") right center no-repeat;

       }

</style>

【讨论】：