Javascript键盘事件入门？ （或者说：帮我用我的自定义下拉菜单）

Question

我需要帮助完成我自定义的基于ajax [div]的动态下拉菜单。

基本上，我有一个[输入]框; onkeyup，运行一个Ajax搜索，返回divs中的一堆结果，并使用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] 

它的工作原理..一级棒！看起来比较优雅，比任何常规下拉菜单都更加完整（这些结果div会带来很多信息）。

但是，我错过了常规HTML元素背后的大部分重要功能，也就是说，我无法在“选项”之间按下或关闭键盘。我该怎么做呢？我知道JavaScript处理键盘事件，但;我一直无法找到一个好的指导如何做到这一点。 （当然，对此的后续问题最终会变成：我可以使用<ENTER>来触发该onclick事件吗？）

Answer 1

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

我的建议是，你使用AJAX库一样YUI，jQuery，Prototype等原因有二：

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

Forget addEvent, use Yahoo!’s Event Utility提供了一个很好的事件库应该为您提供的摘要。我很确定由jQuery，Prototype等提供的事件库。人。提供类似的功能。

如果那篇文章在你的头上看了一下this documentation，然后重新阅读原文（我发现文章在使用事件库后变得更有意义）。

一对夫妇的其他东西：

• 使用JavaScript给你更多的控制比写onkeyup等属性到HTML中。除非你想做点什么真的很简单我会用JavaScript。
• 如果你编写自己的代码来处理键盘事件，good key code reference真的很方便。

Answer 2

关闭我的头顶，我会认为您需要维护某种形式JavaScript中反映当前下拉列表中的项目的数据结构。您还需要参考当前活动/选定的项目。

每次启动keyup或​​时，都会更新对数据结构中活动/选定项目的引用。要在UI上提供突出显示的信息，请根据项目是否处于活动状态或未选中状态，添加或删除通过CSS进行了样式设置的类名称。

此外，这不是一个biggy，但innerHTML是不是真的标准（查看createTextNode(),createElement()和appendChild()为创建数据的标准方法）。您可能还想了解有关在JavaScript中附加事件处理程序的信息，而不是在HTML属性中这样做。