jquery 键上下导航搜索结果

发布于 2024-09-24 12:49:26 字数 668 浏览 6 评论 0原文

我有一个输入框，当您键入时会显示一个名为“建议”的 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();

    }
});

谢谢

原文

I have an input box that as you type displays a div called "suggestions" and compiles it with search results, each result is displayed between p tags.

You can select a result using the mouse but I would like to be able to select one using up and down keys.

I have got it so far that if you press down the suggestions box appears again (I know it would already be displayed- but thats another issue), and attepts to add focus to the first p tag. how can I have it so as you keep pressing down it filters through the results lets say adds and removes a class of "active" each time. and obviously the same for going up as well?

I have found so many random plugins but they all seem to complex and bulky for what I am trying to achieve.

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

    }
});

Thanks

分享到QQ

分享到微博