使用箭頭鍵更改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;
    }    

我是Java的新手，並且是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>