绑定键以导航结果

Question

所以我有一个输入，我使用ajax获取结果这是看起来像这样的简化代码

<input placeholder="search here" id="search"></input>
<div id="searchResults">
     <a href="link">search result 1</a>
     <a href="link">search result 2</a>
</div>

所以我想要的是当有人搜索某些内容并且下一个div中显示的结果可以通过箭头键导航而无需移动鼠标或使用Tab键。

Answer 1

这是一些例子。在这里演示http://jsfiddle.net/sjnilan/HJGFG/

$(document).ready(function () {


    $(document).keyup(function (e) 
     {
        var code = (e.keyCode ? e.keyCode : e.which);
         if (code == 38) {
             $("#searchResults a").css("background-color","#fff");
            $("#searchResults a").prev().css("background-color","yellow");
         } 
         else if (code == 40) 
         {
             $("#searchResults a").css("background-color","#fff");
            $("#searchResults a").next().css("background-color","yellow");
         }
    });

});