搜索框上的向上/向下箭头 jQuery 事件

Question

我正在尝试实现中提到的类似功能 jQuery Key Events with a Search Box

我想在搜索结果中上下箭头，并在输入键或鼠标点击时选择结果。

在以下位置找到我的代码：http://jsfiddle.net/CyQ2w/

3 个问题：

我可以上下箭头，但是当我在最后一个项目之后向下箭头时，项目上的选择消失了。我试图在最后一项之后禁用浏览，即保持最后一项被选中。当我们向上箭头时，第一个项目也会发生同样的事情。

当我将鼠标悬停在项目列表上并移出鼠标时，选择悬停被移除，现在向上和向下箭头不起作用。

此外，在输入键上似乎没有设置带有所选项目的文本区域。我正在尝试捕获所选 li 的“id”。

我们将不胜感激。

Answer 1

对于您的第一个问题，您可以添加如下检查 -

...
else if (code === 40) { //Down arrow
        if($("li.hovered").index()==$("li").length-1) return;
...
else if (code === 38) { //Up arrow
        if($("li.hovered").index()==0) return;
        ...

这意味着当您在第一项 index 0 中时，按向上箭头将无济于事。

顺便说一句，38 不是向下箭头，而是向上箭头。不要让其他人感到困惑。 我希望你能自己做下来检查。

你可以像下面这样解决第二个问题 -

$("#userlist_container li").hover(function () {
    $('li.hovered').removeClass('hovered');
    $(this).addClass("hovered");
}, function () {
    // $(this).removeClass("hovered");
});

如果没有完整的代码，你的第三个问题很难解释，所以请查看我的更新代码http://jsfiddle.net/CyQ2w/7/

您应该使用e.preventDefault(); 阻止事件