jQuery自动完成:不能在重点项目上应用样式 [英] JQuery Autocomplete : can't apply style on the focused item

问题描述

我有一个简单的输入

<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>并按需触发鼠标悬停或上/下箭头键上的焦点事件.

JQuery Autocomplete fill the <ul> with the <li>s as it should and triggers a focus event on mouseover or down/up arrow key as it should.

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

The problem is that I want to apply a particular style to the focused item, so in my CSS I have something like that

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

这是我的问题，关注的项目永远不会采用ui-state-focus类，因此它永远不会采用已定义的样式.

There is my problem, the focused item never takes the ui-state-focus class and therefore it never takes the defined style.

我在做什么错:(?

我已经尝试在CSS中添加类似内容

EDIT : I already tried to add in my CSS something like

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

实际上，它通过悬停而不是通过向下/向上箭头键实现焦点.而且，我不太喜欢它，我更愿意按照我的意愿使它工作……

Indeed it does the trick for the hover, but not for the focus via down/up arrow key. Moreover, I don't really like it, I would prefer to make it work the way it's meant to if I can...

推荐答案

我设法使其正常工作.

出于某种原因，JQuery Autocomplete不会将ui-state-focus应用于重点<li>，但确实将ui-state-active类应用于重点<li>内的<a> .因此，我可以通过

For some reason JQuery Autocomplete doesn't apply the ui-state-focus on the focused <li> but does apply the ui-state-active class on the <a> inside the focused <li>. Therefore I can apply the wanted style via

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

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

I still have no idea why it applies a class only on the <a> inside and not on the <li> as describe on all the documentations but hey, it works...

这篇关于jQuery自动完成:不能在重点项目上应用样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！