1

我使用 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;
}
4

3 回答 3

3

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

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

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

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

在此处输入图像描述

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

在此处输入图像描述

于 2013-11-15T14:50:25.360 回答
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%;  
}
于 2012-06-29T09:23:25.100 回答
1

这是 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>
于 2019-04-05T10:09:53.677 回答