时间戳

首页 > 解决方案 > 使用箭头键时更改 jQuery 自动完成下拉菜单的背景颜色

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

问题描述

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

标签： javascriptjqueryhtmlcss

解决方案

改变这个：

.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类添加到div内部li（有.ui-menu-item-wrapper类的那个），当你离开它时，它会再次删除该类。

作为一般规则，ui-state-active当您通过键盘移入和移出项目时，jQuery-UI 使用这种技术来打开和关闭类。由于在某些情况下该项目不会“正式”获得焦点，因此: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>

推荐阅读