Jquery箭头键导航

Question

我有像自动提示这样的Facebook的文本字段和下拉菜单:

<input type="text" id="search" name="search_fld"/>

<div id="display">
<div class="display_box">Luca</div>
<div class="display_box">David</div>
<div class="display_box">Mark</div>
<div class="display_box">...</div>
</div>

我的CSS:

.display_box:hover
{
  background:#3b5998;
  color:#FFFFFF;
}

如何通过向下箭头键将"悬停"状态从我的输入"search_fld"传递到第一个"display_box",依此类推所有"display"div？

这是jsfiddle代码的链接.

Answer 1

您无法完美地模拟悬停状态..添加具有相同样式的"真实"类是无法逃脱的:

.display_box_hover, .display_box:hover
{
  background:#3b5998;
  color:#FFFFFF;
}

现在这段代码将"导航"元素:

window.displayBoxIndex = -1;

$("#search").keyup(function(e) 
{
        if (e.keyCode == 40) 
        {  
            Navigate(1);
        }
        if(e.keyCode==38)
        {
            Navigate(-1);
        }

});

var Navigate = function(diff) {
    displayBoxIndex += diff;
    var oBoxCollection = $(".display_box");
    if (displayBoxIndex >= oBoxCollection.length)
         displayBoxIndex = 0;
    if (displayBoxIndex < 0)
         displayBoxIndex = oBoxCollection.length - 1;
    var cssClass = "display_box_hover";
    oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass);
}

这将"记住"最后一个"selected"元素的索引并切换到next或previous元素,使用该eq()函数并将上面的类添加到所选元素.

更新了jsFiddle.