Question

嘿伙计们，可能是一个简单的问题，但无法在网上找到任何东西。

我有一个包含搜索结果的列表，我希望能够使用我的向上和向下键在列表中导航。

    if (e.keyCode == 40) { //down
        //alert('down');
        $('#searchresults ul li').each(function() { 

        });
    }

    if (e.keyCode == 38) { //up
        //alert('up');
    }

    if (e.keyCode == 13) { //enter
        //alert('enter');
    }

搜索结果如下所示：

<ul>
    <li class="matched"><a href="link1">link1</a></li>
    <li class="matched"><a href="link2">link2</a></li>
    <li class="matched"><a href="link3">link3</a></li>
</ul>

所以基本上我只是希望能够使用向上和向下键来浏览我的搜索结果。选择当前元素应该只是改变背景颜色，当我按下回车键时，会触发链接和匹配的元素。

任何想法如何迭代搜索结果？谢谢

编辑：

var pressedCount = 0;

if (e.keyCode == 40) { //down
    console.log(pressedCount);
    $('#searchresults ul li').index(pressedCount).addClass('selected');
    pressedCount++;
}

不起作用，因为我在使用index-method做错了。但是，每个arrowkeydown触发器上的pressedCount var都会递增。

Answer 1

工作演示： http://jsfiddle.net/zBjrS/1/

（您必须先点击该页面才能聚焦IFRAME。）

Answer 2

不确定我是否真的喜欢接管用户箭头键的想法，特别是当我们生活在一个页面上/下不再出现在很多键盘（笔记本电脑）上的世界时。有很多用户使用箭头进行滚动。

如果您在结果上设置键盘导航，只需将焦点设置在第一个链接上，然后选项卡将关闭，Shift +选项卡将会上升。

所有这些功能都已构建在您必须将焦点设置在第一个元素

上

$('first_element_selector').focus();

Answer 3

这样的事情应该起作用

if (e.keyCode == 40) { //down
    $('#searchresults ul li').each(function() { 
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
            $(this).next().addClass('selected');
            // use $(this).prev() for UP case
        }
    });
}

请注意，您需要使用“已选择”的css类预加载列表，或者添加一些代码以将所选内容应用于列表中的第一项（如果没有选择）

你还需要代码来检查你是否在列表中的最后一项，你不想在这种情况下调用.next（）

接下来是jQuery http://api.jquery.com/next/

jQuery prev http://api.jquery.com/prev/

jQuery hasClass http://api.jquery.com/hasClass/

jQuery removeClass http://api.jquery.com/removeClass/

jquery keypress遍历每个循环？

3 个答案: