javascript - 使用箭头键时更改 jQuery 自动完成下拉菜单的背景颜色

Question

我正在使用 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 的绝对初学者，关于如何使背景颜色保持一致(无论是使用鼠标还是箭头键进行选择)有什么想法吗？谢谢

Answer 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 伪类对于此目的并不完全可靠(事实上，它在这里不起作用)。

我明白你为什么找不到这个了。每次您尝试检查您用箭头键向下定位的元素时，该元素都会失去焦点，因此您看不到它的状态!无论如何，当您尝试在 jQuery-UI 中设置某种选定项的样式时，ui-state-active 类是需要注意的东西。

$(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>