如何在下拉“选项”之间向下或向上键盘？

Posted 2023-03-17

【中文标题】如何在下拉“选项”之间向下或向上键盘？

【英文标题】：How to keyboard down or up between dropdown "options"?

【发布时间】：2010-09-05 12:21:56

【问题描述】：

我有一个自定义构建的基于 ajax [div] 的动态下拉列表。

我有一个 [输入] 框； onkeyup，运行 Ajax 搜索，在 divs 中返回结果，并使用 innerhtml 拉回。这些divs 都有亮点onmouseover 因此，典型的成功搜索会产生以下结构（请原谅半代码）：

[input]
 [div id=results] //this gets overwritten contantly by my AJAX function
  [div id=result1 onmouseover=highlight onclick=input.value=result1]
  [div id=result2 onmouseover=highlight onclick=input.value=result2]
  [div id=result2 onmouseover=highlight onclick=input.value=result2]
 [/div]

有效。

但是，我错过了常规 HTML 元素背后的重要功能。我无法在“选项”之间按下或按下键盘。

我知道 javascript 处理键盘事件，但是；我一直没能找到一个好的向导。 （当然，后续问题最终会是：我可以使用<ENTER> 来触发onclick 事件吗？）

【参考方案1】：

您需要做的是使用id="results" 将事件侦听器附加到div。您可以在创建 div 时添加 onkeyup、onkeydown 等属性，也可以使用 JavaScript 附加这些属性。

我的建议是您使用 YUI、jQuery、Prototype 等 AJAX 库，原因有两个：

听起来您正在尝试创建一个Auto Complete 控件，这是大多数AJAX 库都应该提供的。如果您可以使用现有组件，您将节省大量时间。 即使您不想使用某个库提供的控件，所有库都提供了有助于隐藏不同浏览器提供的事件 API 之间的差异的事件库。

Forget addEvent, use Yahoo!’s Event Utility 很好地总结了事件库应该为您提供的内容。我很确定 jQuery、Prototype 等提供的事件库。人。提供类似的功能。

如果该文章超出您的想象，请先查看this documentation，然后重新阅读原始文章（使用事件库后，我发现这篇文章更有意义）。

其他几件事：

与将onkeyup 等属性写入HTML 相比，使用JavaScript 可以为您提供更多控制。除非你想做一些非常简单的事情，否则我会使用 JavaScript。 如果您编写自己的代码来处理键盘事件，good key code reference 真的很方便。

【参考方案2】：

在我的脑海中，我认为您需要在 JavaScript 中维护某种形式的数据结构，以反映当前下拉列表中的项目。您还需要对当前活动/选定项目的引用。

每次keyup 或keydown 被触发时，更新对数据结构中活动/选定项的引用。要在 UI 上提供突出显示信息，请添加或删除通过 CSS 设置样式的类名称，具体取决于项目是否处于活动/选中状态。

此外，这不是什么大问题，但innerHTML 并不是真正的标准（查看createTextNode()、createElement() 和appendChild() 以了解创建数据的标准方法）。您可能还想了解在 JavaScript 中而不是在 HTML 属性中附加事件处理程序。