[英]How to keyboard down or up between dropdown “options”?
我有一个基于定制的ajax [div]动态下拉列表。
我有一个[输入]框; onkeyup
,运行Ajax搜索,返回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
事件吗?)
您需要做的是将事件侦听器附加到具有id="results"
的div
。 您可以通过在创建div
时将onkeyup
, onkeydown
等属性添加到div
来执行此操作,也可以使用JavaScript附加这些属性。
我的建议是你使用像YUI , jQuery , Prototype等AJAX库有两个原因:
忘记addEvent,使用Yahoo!的Event Utility可以很好地总结一下事件库应该为您提供的内容。 我很确定jQuery,Prototype等提供的事件库。 人。 提供类似的功能。
如果那篇文章结束了,请先阅读本文档然后重新阅读原文(我发现在使用事件库之后这篇文章更有意义)。
其他几件事:
onkeyup
等属性提供更多的控制。 除非你想做一些非常简单的事情,否则我会使用JavaScript。 在我的脑海中,我认为您需要在JavaScript中维护某种形式的数据结构,以反映当前下拉列表中的项目。 您还需要对当前活动/所选项目的引用。
每次触发keyup
或keydown
,更新对数据结构中的active / selected项的引用。 要在UI上提供突出显示信息,请根据项目是否处于活动状态/已选择,添加或删除通过CSS设置样式的类名称。
此外,这不是一个大问题,但innerHTML
并不是真正的标准(查看createTextNode()
, createElement()
和appendChild()
以获取创建数据的标准方法)。 您可能还希望在JavaScript中查看附加事件处理程序,而不是在HTML属性中执行此操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.