Question

我有两个div。其中一个包含输入字段，另一个包含建议列表。我想要的是用户使用箭头键进入第二个div的能力，同时滚动浏览建议列表。这是它的外观：

<div id="first"><input type="text" /></div>

<div id="second"> 
<ul>
<li>suggestion</li>
<li>suggestion2</li>
<li>suggestion3</li>
</ul>
</div>

我确实在Stack找到了一些东西：Fiddle

但是我无法使它工作，因为它使用类名而我使用的是ID。我非常感谢有人会为我重写这个，所以我可以追加ID。

Answer 1

使用onKeyDown事件，如

function KeyDownEvent(Event)
{
    if (Event.keyCode == 40) // down key was pressed 
    else if (Event.keyCode == 38) // up key was pressed
}

document.getElementById("textinput").onkeydown = KeyDownEvent;

然后您的输入HTML将如下所示：

<input type="text" id="textinput" />

请注意，我的示例不使用经常不必要的jQuery库。

在实际的事件中，您将更改列表项的样式并保存用户为自动完成选择的值，您现在应该可以自己弄清楚。

Answer 2

这是一个非常简单的改变，让你的小提琴按你想要的方式工作：

jsfiddle

类名仅用于突出显示所选项目。小提琴使用id来引用输入和项目包装器。它与你的代码没有太大的不同。现在您可以看到它与您的代码一起使用，您应该能够进行您认为合适的其他更改。希望它有所帮助。

编辑： Woops。看起来我忘了更新小提琴。这已得到修复。

在div中使用箭头键

2 个答案: