20

我有一个自定义构建的基于 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事件吗？）

4

2 回答 2

9

您需要做的是将事件侦听器附加到divwith id="results"。您可以通过在创建时添加onkeyup,onkeydown等属性来完成此操作div，也可以使用 JavaScript 附加这些属性。

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

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

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

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

其他几件事：

  • onkeyup与在 HTML 中写入等属性相比，使用 JavaScript 为您提供了更多的控制权。除非你想做一些非常简单的事情，否则我会使用 JavaScript。
  • 如果您编写自己的代码来处理键盘事件，那么好的键代码参考真的很方便。
于 2008-08-17T20:48:41.760 回答
1

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

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

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

于 2008-08-07T16:11:58.413 回答