jQuery UI 自动完成，CSS 问题

Question

我想为显示搜索结果的<ul>元素添加样式。但是，它会使用由脚本生成的内联css进行样式设置。如果我想将列表从搜索框下移一点怎么办？

- Johan

Answer 1

为了制作自己的 JQueryUI Autocomplete 主题，您需要重新编写样式。这里是所有类的示例：

<input class="ui-autocomplete-input"/>
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all">
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 1</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 2</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 3</a>
  </li>
</ul>

所以，您的CSS文件应该覆盖您想要更改的所有类的样式。例如：

.ui-menu-item{
   color: blue;
   font-weight: bold;
}

不要忘记在JQueryUI CSS文件之后包含您的CSS文件，以强制覆盖。

- Fran Verona

---

这并没有解决问题 - jQueryUI会在元素上放置内联样式，这些样式优先于CSS类。 - leek

Answer 2

经过数小时的搜索，我找到了以下类似的内容：

var ac = $("#tags").autocomplete({
    source: availableTags,
    open: function (event, ui) {
         $(".ui-menu").css("width", 300);
    }
});

“打开事件”可以让您访问以前不存在的元素：

- Andrew Rebane

Answer 3

如果我想把列表从搜索框下移一点，我需要做什么呢？请在你的.css文件中添加以下内容。

.ui-autocomplete {
    /* Move the autocomplete down a bit from the search box. */
    margin-top: 35px !important;
    /* Remove the whitespace around the individual items. */
    padding: 0px;
}

如果您想更改单个项目的样式，则使用Fran的答案中提到的.ui-menu-item。

如果您想更改列表中所选或悬停在其上的项目的样式，则需要将以下内容添加到您的.css文件中。

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    background-color: grey;
    background-image: none;
    padding: 0px;
    margin: 0px;
    border-radius: 0;
}

- Brant Olsen

Answer 4

这并不能完全解决你的问题，但是很方便。

jQuery UI 自动完成模块有一个 position 属性，你可以通过 这些设置 进行调整。

将其与 CSS 样式中的 .ui-* 类一起使用，你应该能够实现你想要的效果。

- leek