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

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

我建议你使用像YUI，jQuery，Prototype这样的AJAX库，原因有两个：

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

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

如果那篇文章结束，请先查看this documentation，然后重新阅读原文（我发现在使用事件库后文章更有意义）。

其他一些事情：

使用JavaScript可以比将{{1}}等属性写入HTML更具控制力。除非你想做一些非常简单，否则我会使用JavaScript。
如果您编写自己的代码来处理键盘事件，good key code reference非常方便。

Answer 2

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

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

此外，这不是一个大问题，但innerHTML并非真正标准（查看createTextNode()，createElement()和appendChild()以获取创建数据的标准方法。您可能还希望了解如何在JavaScript中附加事件处理程序，而不是在HTML属性中执行此操作。

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

2 个答案: