jQuery自动完成行在选择时突出显示答案

【问题标题】：jQuery autocomplete rows highlight on selectjQuery自动完成行在选择时突出显示
【发布时间】：2011-09-19 10:47:46
【问题描述】：

当出现建议框并且用户按下向下键（或者他们将鼠标移到一个建议上）时，我需要突出显示整行。到目前为止，当按下向下键时，只有超链接的背景被突出显示。我尝试设置 ui-state-hover 类的样式，但这仅用于锚元素。我不知道如何突出显示 li 元素。

到目前为止，这是我的 CSS：

.ui-state-hover, .ui-autocomplete li:hover
{
    color:White;
    background:#96B202;
    outline:none;
}

编辑： 为了更清楚一点，自动完成功能会像这样生成它的元素：

<ul>
<li><a>an element</a></li>
<li><a>another element</a></li>
</ul>

当按下向下键时，锚元素自动获取类 ui-state-hover。

【问题讨论】：

您能否获得更多详细信息，因为在您发送的示例中，当您按下键或将鼠标移到元素上时，该行会突出显示。要添加更多功能吗？
不，这与功能无关。按下 Down 键已经触发列表项中的锚元素以获取新类“ui-state-hover”。我设法使锚元素的背景成为我想要的颜色。我想做的是使包含锚元素的整个列表项与突出显示的锚元素颜色相同。

【解决方案1】：

我遇到了同样的问题，通过以下方式解决了：

.ui-state-focus
{
    color:White;
    background:#96B202;
    outline:none;
}

【讨论】：

【解决方案2】：

作为 CSS 的初学者，我之前没有看到这一点：我只需要制作锚元素的样式 display:block。以防万一有人再次遇到这种情况。

【讨论】：

【解决方案3】：

你可以使用事件：

yourElement.autocomplete({
        focus: function(event, ui) { console.log(var li = $(event.srcElement).parent()); },
});

li 变量是您所需要的。您可以按照自己喜欢的方式更改样式或添加类。

【讨论】：

我尝试使用这样的焦点事件： focus: function (event, ui) { $(".ui-autocomplete li a").parent().removeClass("ui-state-hover "); $(".ui-autocomplete li a.ui-state-hover").parent().addClass("ui-state-hover");} 。问题是两个元素同时突出显示的情况，这可能会让用户感到困惑。我认为这是因为调用焦点事件的时间。
这个想法不仅在于焦点事件，还在于从事件对象中获取目标元素。 $(event.srcElement).parent()
你的解决方案和我的代码效果一样。我终于找到了答案，这只是 CSS 的问题。还是谢谢你！
我很好奇event 是什么。很高兴我现在知道srcElement。您是从哪里得知 srcElement 的语法的？
srcElement 是 JavaScript 的一部分，而不是 jQuery。您可以在here 或标准中阅读它。