带有搜索框的 jQuery 关键事件答案

【问题标题】：jQuery Key Events with a Search Box带有搜索框的 jQuery 关键事件
【发布时间】：2010-12-07 16:03:55
【问题描述】：

我正在使用 jQuery 开发一个自动提示插件，我想添加 Keypress 事件，以便用户可以向下和向上箭头。此外，如果他们按下回车，它会将值添加到输入中。

这是我的 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

         }


    });

到目前为止，我不太确定要使用正确的逻辑，以便用户可以向上、向下滚动，然后按“输入”键来选择一个项目。

对此的任何建议和帮助将不胜感激！谢谢。

【问题讨论】：

标签： javascript jquery keyboard

【解决方案1】：

添加到 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());
            }
        }
    });
});

【讨论】：

【解决方案2】：

但我认为随后您希望第二次“按下”以突出显示第二次并从第一次中删除？等等等等..

if(!$("li.hovered")){ //如果没有 li 有悬停的类 $("#myInputResults li").eq(0).addClass("hovered"); }别的{ $("li.hovered").eq(0).removeClass("hovered").next().addClass("hovered"); }

这是假设在任何时候只有一个带有悬停类的元素

【讨论】：