javascript - 如何在下拉列表 "options"之间向下或向上键盘？

Question

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

我有一个[输入]框； onkeyup , 运行 Ajax 搜索，返回 div 中的结果s 并在使用 innerHTML 时退缩.这些div都有亮点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 事件吗？)

Answer 1

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

我的建议是使用像 YUI 这样的 AJAX 库, jQuery , Prototype等，原因有二:

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

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

如果那篇文章超出了您的理解范围，请查看 this documentation先重读原文(使用事件库后发现文章更有意义)。

其他一些事情:

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