使用箭头键时更改 jQuery 自动完成下拉的背景颜色答案

【问题标题】：Change Background-Color of jQuery Autocomplete Drop Down When Using Arrow Keys使用箭头键时更改 jQuery 自动完成下拉的背景颜色
【发布时间】：2018-09-16 02:26:53
【问题描述】：

我在我的项目中使用jQuery Autocomplete，当我将鼠标悬停在建议项目上或使用向上/向下箭头键选择一项时，我希望建议项目的背景颜色为红色。

到目前为止，我的代码如下所示：

<input id="ajax" placeholder="Search by company name or ticker" autofocus method="GET"  action="{% url 'index' %}" >

<script>
    var availableTags = [
        {% for stock in stocks %}
            { value: "/s/{{ stock.ticker|safe }}",
              label: "{{ stock.ticker|safe }} - {{ stock.name|safe }}"
            },
        {% endfor %}    
    ];

    $(document).ready(function() {
        $("input#ajax").autocomplete({
            source: availableTags,
            select: function( event, ui ) { 
                window.location.href = ui.item.value;
            }
        });
    });
</script>

我可以使用以下代码编辑鼠标悬停的背景颜色，但当我使用箭头键进行选择时，它仍默认为通用蓝色：

    .ui-menu .ui-menu-item-wrapper {
        color: #303030;
        background-color: #fff;
    }        

    .ui-menu .ui-menu-item-wrapper:hover {
        color: #303030;
        background-color: red;
        border: #fff 1px solid;
    }

我对 Javascript 有点陌生，并且是 jQuery 的绝对初学者，有什么想法可以让背景颜色保持一致，无论是使用鼠标还是箭头键进行选择？谢谢

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

改变这个：

.ui-menu .ui-menu-item-wrapper:hover {
    color: #303030;
    background-color: red;
    border: #fff 1px solid;
}

对此：

.ui-menu .ui-menu-item-wrapper:hover, .ui-menu .ui-menu-item-wrapper.ui-state-active {
    color: #303030;
    background-color: red;
    border: #fff 1px solid;
}

当你移动到一个自动完成项时，jQuery-UI 将.ui-state-active 类添加到li 内的div（具有.ui-menu-item-wrapper 类的那个），当你离开它时，它会再次删除该类。

作为一般规则，当您通过键盘移入和移出项目时，jQuery-UI 使用这种技术来打开和关闭ui-state-active 类。由于在某些情况下该项目不会“正式”获得焦点，因此 :focus 伪类对于此目的并不完全可靠（实际上，它在这里不起作用）。

我明白你为什么找不到这个了。每次您尝试检查您按下箭头键的项目时，该项目都会失去焦点，因此您看不到它的状态！不管怎样，ui-state-active 类是当您尝试在 jQuery-UI 中设置某种选定项的样式时需要留意的。

$(document).ready(function() {

  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];

  $("#tags").autocomplete({
    source: availableTags
  });
});

.ui-menu .ui-menu-item-wrapper {
  color: #303030;
}

.ui-menu .ui-menu-item-wrapper:hover,
.ui-menu .ui-menu-item-wrapper.ui-state-active {
  color: #303030;
  background-color: red;
  border: #fff 1px solid;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

【讨论】：