JQuery 自动完成：无法在焦点项目上应用样式

Question

我有一个像这样的简单输入

<input id="name-srch" type="text" data-type="string">

还有我的 js（简体）

$('#name-srch').autocomplete({
  source: function (request, response) {
      $.ajax({
          url: ...,
          data: ...,
          success: function (data) {
              // note that 'data' is the list of elements to display
              response(data)
          }
      });
  },
  select: function (event, ui) {
      // do some stuff
      return false
  },
  focus: function (event, ui) {
      console.log(ui.item.Name) // just to see if the focus event is triggered, and it is
      return false
  }
})
.autocomplete("instance")._renderItem = function (ul, item) {
    return $("<li>")
        .append("<a>" + item.Name + "</a>")
        .appendTo(ul);
};

JQuery 自动完成用 <li>s 填充 <ul>，并在鼠标悬停或 down/up 方向键时触发焦点事件。

问题是我想将特定样式应用于重点项目，所以在我的 CSS 中有类似的东西

.ui-state-focus {
    background-color: red;
    font-weight: bold;
}

这是我的问题，焦点项目从不采用 ui-state-focus class，因此它从不采用定义的样式。

我做错了什么:(?

编辑： 我已经尝试在我的 CSS 中添加类似

的内容

.ui-menu-item:hover {
    background-color: red;
    font-weight: bold;
}

确实，它可以实现悬停，但不能实现 down/up 箭头键的焦点。而且，我不是很喜欢它，如果可以的话，我宁愿让它按照它本来的方式工作......

Answer 1

也许换肤的另一种方法是在 javascript 的 li 中添加一个 class 然后添加类似这样的内容

.li-hover:hover {
    background-color: red;
    font-weight: bold;
}

可能会成功，我猜是因为你设置了不同的渲染器 jquery 自动完成不会为你做悬停。

Answer 2

试试这个选择器：

.ui-menu .ui-menu-item:hover, .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus {
    background-color: red;
    font-weight: bold;
}

我回答的另一个问题中有一个 JSFIDDLE。只需检查 CSS 定义中的最后一行：

https://jsfiddle.net/g4bvs0we/5/

更新：我已经更新了源代码和jsfiddle link。我想 CSS 规则优先级存在问题，放置更具体的规则应该会有所帮助。

你能告诉我这是否有效吗？

Answer 3

我成功了。

出于某种原因 JQuery 自动完成不会在焦点 <li> 上应用 ui-state-focus，但会在 [=] 上应用 ui-state-active class 14=] 里面重点<li>。因此我可以通过

应用想要的样式

.ui-state-active {
    background-color: red;
    font-weight: bold;
}

我仍然不知道为什么它只在 <a> 内部应用 class 而不是在所有文档中描述的 <li> 上应用，但是嘿，它有效.. .

Answer 4

我使用以下方法解决了这个问题：

.ui-autocomplete {
    .ui-state-focus {
        border: 0px !important;
        background: #yourcolour !important;
        color: #yourcolour !important;
    }
}

JQuery 自动完成：无法在焦点项目上应用样式

JQuery Autocomplete : can't apply style on the focused item

jquery

jquery-ui

jquery-ui-autocomplete