jQuery键盘按键控制搜索结果的上下导航

Question

我有一个输入框，当你输入时会显示一个名为“建议”的div，并将其与搜索结果编译在一起，每个结果都在p标签之间显示。

你可以使用鼠标选择结果，但我想能够使用上下箭头键选择结果。

到目前为止，如果按下向下箭头，建议框会再次出现（我知道它已经显示了-但那是另一个问题），并尝试将焦点添加到第一个p标签。如何让它随着你不断按下向下键来过滤结果，例如每次添加和删除“active”类呢？显然，向上也是同样的情况？

我找到了很多随机插件，但它们似乎对我想要实现的东西太复杂和笨重了。

$('#search input#q').keypress(function (e) {
    switch (e.keyCode) {
        // User pressed "up" arrow
    case 38:
        $('#suggestions').fadeOut('fast');
        break;

    case 40:
        // User pressed "down" arrow
        $('#search input#q').blur();
        $('#suggestions').fadeIn();
        $('#suggestions p').focus();

    }
});

谢谢

- AJFMEDIA

Answer 1

Autocomplete是一个由jQuery团队支持的小部件。它具有使用箭头键和回车键进行选择的功能。它还是一个简单的插件（具有轻松扩展功能的能力）。

http://jqueryui.com/demos/autocomplete/

祝好， awirick

- Andrew Wirick

---

非常完美，谢谢。我已经看了很多网站，这个非常准确，谢谢。 - AJFMEDIA