添加了jquery ui-autocomplete-loading类，但样式不适用

Question

我正在使用jquery ui autocomplete在我的网站上进行搜索。我想在返回结果时添加一个简单的加载微调器。当加载结果时，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;
}

Answer 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，你可以在这里看到更新的样式。

Answer 2

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

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

e.g。

<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%;  
}

Answer 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>