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

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]

有用.

但是,我忽略了常规HTML元素背后的重要功能.我不能在"选项"之间键盘向下或向上.

我知道javascript处理键盘事件但是; 我找不到一个好的指南.(当然,后续问题将最终成为:我可以<ENTER>用来触发那个onclick事件吗？)

Answer 1

您需要做的是将事件侦听器附加到divwith id="results".您可以通过添加这样做onkeyup,onkeydown等属性的div,当你创建它,或者你可以把这些使用JavaScript.

我的建议是你使用像YUI,jQuery,Prototype等AJAX库有两个原因:

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

忘记addEvent,使用Yahoo!的Event Utility可以很好地总结一下事件库应该为您提供的内容.我很确定jQuery,Prototype等提供的事件库.人.提供类似的功能.

如果那篇文章结束了,请先阅读本文档然后重新阅读原文(我发现在使用事件库之后这篇文章更有意义).

其他几件事:

• 使用JavaScript为您提供了比onkeyup在HTML中编写等属性更多的控制权.除非你想做一些非常简单的事情,否则我会使用JavaScript.
• 如果您编写自己的代码来处理键盘事件,那么一个好的密钥代码引用非常方便.