jquery ui autocomplete,css问题

Question

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

Answer 1

要创建自己的JQueryUI自动完成主题,您需要重写样式.以下是所有类的示例:

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

Open事件使您可以访问以前不存在的元素:\