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自动填充功能将<ul>与<li>s一起填充，并按原样触发鼠标悬停或向上/向上箭头键上的焦点事件。

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

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

有我的问题，焦点项永远不会占用ui-state-focus类，因此它永远不会采用定义的样式。

我做错了什么:(？

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

的内容

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

实际上它可以用于悬停，但不能通过向下/向上箭头键进行聚焦。而且，我不是很喜欢它，我宁愿按照它的意思让它按照我的意思......

Answer 1

尝试这个选择器：

.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链接。我猜CSS规则优先级存在问题，并且提出更具体的规则应该有所帮助。

如果有效，请告诉我吗？

Answer 2

我设法让它发挥作用。

出于某种原因，JQuery Autocomplete并未在重点ui-state-focus上应用<li>，但会在ui-state-active 内应用<a>类< / strong>专注<li>。因此，我可以通过

应用想要的风格
.ui-state-active { background-color: red; font-weight: bold; }

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

Answer 3

对于皮肤来说，这可能是一种不同的方法，就是在javascript中为li添加一个类，然后添加类似的东西

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

可能会这样做，我想是因为你设置了一个不同的渲染jquery自动完成功能并不是为你做悬停。

Answer 4

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

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

JQuery自动完成：无法在焦点项

4 个答案: