jQuery方向键导航答案

【问题标题】：Jquery arrow key navigationjQuery方向键导航
【发布时间】：2011-07-29 02:58:50
【问题描述】：

我有这些文本字段和下拉菜单，用于 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”等所有“显示”div？

这是link the jsfiddle code。

【问题讨论】：

标签： jquery navigation key

【解决方案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);
}

这将“记住”最后一个“选定”元素的索引并切换到下一个或上一个元素，使用 eq() 函数并将上面的类添加到该选定元素。

Updated jsFiddle.

【讨论】：

如果你这样做了，那么，老实说......它会比我的好得多
class 是保留名称。您必须更改该 var 名称，否则它将不起作用，至少在 jsfiddle 上。工作版本：jsfiddle.net/supertrue/MKZSE/51
@supertrue 正确，当我写这篇文章时它正在恢复，可能class 在稍后的某个时间点被标记为保留。没有收到您的评论通知，但迟到总比没有好！ :-)
我知道这是从 2012 年开始的，但是您将如何选择“Enter”键盘上的元素？
@Carlos 处理 keyCode 13 的简单问题，参见this fiddle。您可以通过 AJAX 或任何您想要的方式发送它，而不是提醒选定的值。 :)

【解决方案2】：

当然很丑。在小提琴here.

<script src="jquery.js"></script>

<script>
$(function (){

        $('.display_box').hover(function (){            
            $(this).attr('class', 'display_box current')
        }, function (){
            $(this).attr('class', 'display_box');
        });

        $('#search').keyup(
            function (e){
                var curr = $('#display').find('.current');
                if (e.keyCode == 40) 
                {                                   
                    if(curr.length)
                    {
                            $(curr).attr('class', 'display_box');
                            $(curr).next().attr('class', 'display_box current');
                    }
                    else{
                        $('#display div:first-child').attr('class', 'display_box current');
                    }                   
                }
                if(e.keyCode==38)
                {                                       
                    if(curr.length)
                    {                           
                            $(curr).attr('class', 'display_box');
                            $(curr).prev().attr('class', 'display_box current');
                    }
                    else{
                        $('#display div:last-child').attr('class', 'display_box current');
                    }           
                }
            }       
        )

    });
</script>
<style>
.current{
  background:#3b5998;
  color:#FFFFFF;
}
</style>

<input type="text" id="search" name="search_fld"/>
<div id="display">
<div class="display_box current">Luca</div>
<div class="display_box">David</div>
<div class="display_box">Mark</div>
<div class="display_box">...</div>
</div>

【讨论】：

和我的想法一样，只是实现方式不同。 :)

【解决方案3】：

为了实现自动提示文本字段，最好使用'datalist'标签，如下所示：

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

从此处获取有关 datalist 标记的更多详细信息：http://www.w3schools.com/tags/tag_datalist.asp

【讨论】：

【解决方案4】：

您可以使用 css 将箭头键用作输入字段背景/使用背景箭头图像在输入字段上使用覆盖范围，并使用 css 或 js 使其在悬停状态下可见

【讨论】：