jQuery UI自动完成设计

Gibbs 发表于 Dev

吉布斯

我提到了这一点。

$(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"
  ];
  $("#suggestions").autocomplete({
    source: availableTags
  });

});

html, body { height: 100%; width: 100%;  }

#suggestions{
  width:50%;
  height:4vh;
  margin: 25% 0 0 30%;
}

.ui-menu .ui-menu-item:hover, .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus {
    background-color: red;
    font-weight: bold;
}

<head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>


    <body>
        <div id="searchDiv">
            <label for="suggestions"></label>
            <input list="suggestionInput" id="suggestions" name="ice-cream-choice" />
        </div>
    </body>

重现问题：

输入a
将鼠标悬停li在建议中的一项上
使用箭头键向下移动

它在红色上显示错误的项目。

问题：在使用箭头键和鼠标键的情况下，如何进行此项工作？

昌都科马蒂

$( 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-item .ui-menu-item-wrapper.ui-state-active {
    background: green !important;
    font-weight: bold !important;
    color: #ffffff !important;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <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>
 
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
 
</body>
</html>