Jquery箭头键导航

我有这些文本字段和下拉菜单，用于类似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>

如何实现使用向下箭头键将“悬停”状态从输入“搜索”传递到所有“显示”div的第一个“显示框”等

---

这是一个。

您可以使用css使用箭头键作为输入字段背景/使用背景箭头图像覆盖输入字段，并使用css或js使其在悬停状态下可见，确保其丑陋。在小提琴上

$（函数（）{
$（'.display_box'）。悬停（函数（）{
$（this）.attr（'class'，'display\u box current'）
}，函数（）{
$（this.attr（'class'，'display_box'）；
});
$（“#搜索”）.keyup(
职能（e）{
var curr=$（'#display'）.find（'.current'）；
如果（e.keyCode==40）
{                                   
if（当前长度）
{
$（curr.attr（'class'，'display_box'）；
$（curr）.next（）.attr（'class'，'display_box current'）；
}
否则{
$（'display div:first child'）.attr（'class'，'display\u box current'）；
}                   
}
如果（e.keyCode==38）
{                                       
if（当前长度）
{                           
$（curr.attr（'class'，'display_box'）；
$（curr）.prev（）.attr（'class'，'display_box current'）；
}
否则{
$（'display div:last child'）.attr（'class'，'display\u box current'）；
}           
}
}       
)
});
.当前{
背景：#3b5998；
颜色：#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);
}

window.displayBoxIndex=-1；
$（“#搜索”）.keyup（函数（e）
{
如果（e.keyCode==40）
{  
导航（1）；
}
如果（e.keyCode==38）
{
导航（-1）；
}
});
变量导航=功能（差异）{
displayBoxIndex+=diff；
var oBoxCollection=$（“.display_box”）；
如果（displayBoxIndex>=oBoxCollection.length）
displayBoxIndex=0；
如果（displayBoxIndex<0）
displayBoxIndex=oBoxCollection.length-1；
var cssClass=“显示框悬停”；
oBoxCollection.removeClass（cssClass.eq（displayBoxIndex.addClass）（cssClass）；
}

这将“记住”最后一个“选定”元素的索引，并使用

eq（）

函数切换到下一个或上一个元素，并将上面的类添加到该选定元素中

---

.

要实现自动建议文本字段，最好使用“datalist”标记，如下所示：

<input list="search" name="search_fld"/>
  <datalist id="search">
     <option value="Luca"/>
     <option value="David"/>
     <option value="Mark"/>
  </datalist>

---

从这里获取更多关于datalist标签的详细信息：

与我的想法相同，只是实现不同而已。：）如果你做到了，那么，老实说。。。它比我的要好得多

类

是一个保留名称。您必须更改该var名称，否则它将不起作用，至少在jsfiddle上是这样。工作版本：@supertrue-correct，当我写这篇文章时它正在工作，可能

类

在稍后某个时候被标记为保留。没有收到您的评论通知，但迟做总比不做好！：-）我知道这是从2012年开始的，但你会如何选择“回车”键盘按键上的元素？@Carlos处理键码13的简单问题，见中。您可以通过AJAX或任何您想要的方式发送所选值，而不是发出警报。：）

.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);
}

<input list="search" name="search_fld"/>
  <datalist id="search">
     <option value="Luca"/>
     <option value="David"/>
     <option value="Mark"/>
  </datalist>