我正在使用jQuery开发一个自动建议的插件,我想添加Keypress事件,以便用户可以上下箭头键。另外,如果他们按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

         }


    });


到目前为止,我还不确定使用的正确逻辑,以便用户可以向上,向下滚动并按“ enter”选择一个项目。

任何建议和帮助,将不胜感激!谢谢。

最佳答案

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

关于javascript - 带有搜索框的jQuery关键事件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/1583025/

10-08 22:14
查看更多