Javascript 带有搜索框的jQuery键事件

我正在使用jQuery开发一个autosuggest插件，我想添加按键事件，以便用户可以向下和向上箭头。此外，如果他们按enter键，则会将值添加到输入中

这就是我的HTML的外观：

 <input id="myInput" class="textInput" type="text" name="instructorName"/>
     <label for="search">  </label>
        <div id="myInputResults" class="results" style="display: block;">
           <ul>
            <li><a><div class="suggClass">Suggestion #1</div></a></li>
            <li><a><div class="suggClass">Suggestion #2</div></a></li>
            <li><a><div class="suggClass">Suggestion #3</div></a></li>
            <li><a><div class="suggClass">Suggestion #4</div></a></li>
          </ul>
         </div>

到目前为止，我有这样的想法：

  $("#myInput").keyup(function (e) { 

     var code = (e.keyCode ? e.keyCode : e.which);

     if (code == 40) {             //If user "keys down"

              //I would want to addClass 'hovered' to the "first <li>"
             // Remove 'hovered' class from any other <li>'s

         }


    });

到目前为止，我还不太确定应该使用什么样的逻辑，以便用户可以上下滚动并按“回车”键来选择一个项目

---

如果您对此有任何建议和帮助，我们将不胜感激！谢谢。

但是我想接下来您希望第二次向下按突出显示第二次并从第一次向下按中删除？等等等等

if(!$("li.hovered")){ //if no li has the hovered class $("#myInputResults li").eq(0).addClass("hovered"); }else{ $("li.hovered").eq(0).removeClass("hovered").next().addClass("hovered"); }

---

这是在假设在任何时候只有一个元素具有悬停类的前提下进行的，但我假设随后您希望第二次向下按突出显示第二个元素并从第一个元素中删除？等等等等

if(!$("li.hovered")){ //if no li has the hovered class $("#myInputResults li").eq(0).addClass("hovered"); }else{ $("li.hovered").eq(0).removeClass("hovered").next().addClass("hovered"); }

---

这是在假定任何时候只有一个元素带有悬停类的情况下工作的

添加到Psytronic的代码中，这应该也包括enter键代码

$(function(){
  $("#myInput").keyup(function (e) { 
        var code = (e.keyCode ? e.keyCode : e.which);

        if (code == 40) {
            if($("li.hovered").length == 0){
                $("#myInputResults li").eq(0).addClass("hovered");
            }else{
                $("li.hovered").eq(0).removeClass("hovered").next().addClass("hovered");
            }
        };

        if(code == 13) {
            if($("li.hovered").length > 0){
                $("#myInput").val($("li.hovered").eq(0).find("div.suggClass").eq(0).text());
            }
        }
    });
});

---

加上Psytronic的代码，这应该包括回车键代码以及

$(function(){
  $("#myInput").keyup(function (e) { 
        var code = (e.keyCode ? e.keyCode : e.which);

        if (code == 40) {
            if($("li.hovered").length == 0){
                $("#myInputResults li").eq(0).addClass("hovered");
            }else{
                $("li.hovered").eq(0).removeClass("hovered").next().addClass("hovered");
            }
        };

        if(code == 13) {
            if($("li.hovered").length > 0){
                $("#myInput").val($("li.hovered").eq(0).find("div.suggClass").eq(0).text());
            }
        }
    });
});