jquery 键上下导航搜索结果

Question

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

您可以使用鼠标选择结果，但我希望能够使用向上和向下键选择一个结果。

到目前为止，如果您按下建议框，建议框会再次出现(我知道它已经显示 - 但那是另一个问题)，并尝试将焦点添加到第一个 p 标签。我怎样才能拥有它，以便当您继续按下它时，它会过滤结果，比如说每次添加和删除一类“事件”。显然上升也一样？

我发现了很多随机插件，但对于我想要实现的目标来说，它们似乎都很复杂且庞大。

$('#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();

    }
});

谢谢

Answer 1

自动完成是 jQuery 团队支持的小部件。它能够使用箭头键进行选择并输入。它的核心也是一个简单的插件(能够轻松扩展功能)。

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

干杯，奥维里克