Question

我想设置显示搜索结果的<ul>样式。但是，它使用脚本生成的内联css进行样式设置。例如，如果我想从搜索框中稍微移动列表，我该怎么办？

Answer 1

要制作自己的JQueryUI自动完成主题，您需要重写样式。所有课程的Here is an example：

<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文件以强制覆盖。

Answer 2

经过几个小时的搜索，我想出了类似的东西：

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

打开事件使您可以访问以前不存在的元素：\

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

Answer 4

这并不能解决你的整个问题，但却很方便。

jQuery UI自动填充模块具有position属性，您可以使用these settings进行调整。

将它与CSS样式结合使用.ui-*类，你应该能够完成你想要的任务。

jquery ui autocomplete，css问题

4 个答案: