jQuery 自动完成行在选择时突出显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6424482/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery autocomplete rows highlight on select
提问by Diana Ionita
I'm using jQuery UI Autocomplete.
我正在使用jQuery UI 自动完成。
When the suggestion box appears and the user presses the Down key (or they move the mouse over one suggestion), I need the entire row to be highlighted. So far, when pressing the Down key, only the background of the hyperlink gets highlighted. I tried styling the ui-state-hover class, but that's only used on the anchor element. I can't figure out how to highlight the li element.
当建议框出现并且用户按下向下键（或者他们将鼠标移到一个建议上）时，我需要突出显示整行。到目前为止，当按下向下键时，只有超链接的背景被突出显示。我尝试设计 ui-state-hover 类的样式，但这仅用于锚元素。我不知道如何突出显示 li 元素。
Here's my CSS so far:
到目前为止，这是我的 CSS：
.ui-state-hover, .ui-autocomplete li:hover
{
color:White;
background:#96B202;
outline:none;
}
EDIT:To make it a bit more clear, the autocomplete generates its elements like so:
编辑：为了让它更清楚一点，自动完成生成它的元素，如下所示：
<ul>
<li><a>an element</a></li>
<li><a>another element</a></li>
</ul>
when the down key is pressed, the anchor element automatically gets the class ui-state-hover.
当按下向下键时，锚元素自动获取类 ui-state-hover。
采纳答案by Diana Ionita
Being a beginner in CSS, I didn't see this earlier: I only had to make the anchor element's style display:block. In case anyone ever runs into this again.
作为 CSS 的初学者，我之前没有看到这一点：我只需要制作锚元素的 style display:block。万一有人再次遇到这个问题。
回答by Salmon
I had exactly the same problem, solved it by:
我遇到了完全相同的问题，通过以下方式解决了：
.ui-state-focus
{
color:White;
background:#96B202;
outline:none;
}
回答by Lehych
You can use events:
您可以使用事件：
yourElement.autocomplete({
focus: function(event, ui) { console.log(var li = $(event.srcElement).parent()); },
});
livariable is what you need. You can change style or add class the way you like.
li变量是你所需要的。您可以按照自己喜欢的方式更改样式或添加课程。
