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

我有一个[输入]框； onkeyup运行ajax搜索，返回a div中的结果，并使用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事件吗？)

解决方案

回答

我想不到的是，我们需要在JavaScript中维护某种形式的数据结构，以反映当前下拉列表中的项目。我们还需要引用当前活动/选定的项目。

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

同样，这也不是笨拙的，但是innerHTML并不是真正的标准(查看createTextNode()，createElement()和appendChild()以了解创建数据的标准方法)。我们可能还想了解有关在JavaScript中添加事件处理程序的信息，而不是在HTML属性中进行的操作。

回答

我们需要做的是将事件监听器添加到具有id =" results"的div上。我们可以通过在创建div时将onkeyup，onkeydown等属性添加到div中来进行此操作，也可以使用JavaScript添加这些属性。

我的建议是，出于两个原因，我们使用AUI库，例如YUI，jQuery，Prototype等。

• 听起来我们正在尝试创建自动完成控件，这是大多数AJAX库应提供的控件。如果可以使用现有组件，则可以节省大量时间。
• 即使我们不想使用库提供的控件，所有库都提供事件库，这些事件库有助于隐藏不同浏览器提供的事件API之间的差异。

忘记addEvent，使用Yahoo！s Event Utility很好地总结了事件库应为我们提供的内容。我很确定jQuery，Prototype等提供的事件库。 al。提供类似的功能。

如果我们不喜欢该文章，请先阅读此文档，然后重新阅读原始文章(使用事件库后，我发现该文章意义更大)。

其他几件事：

• 与将onkeyup等属性写入HTML相比，使用JavaScript为我们提供了更多的控制权。除非我们想做一些非常简单的事情，否则我将使用JavaScript。
• 如果我们编写自己的代码来处理键盘事件，那么很好的键代码参考确实非常方便。