Javascript的键盘事件打底? (或者说:用我的自定义下拉菜单帮助我)

aid 发布于 2018-03-04 dom 最后更新 2018-03-04 01:03 606 浏览

我需要帮助完成我自定义的基于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]
它的工作..美丽!看起来比较优雅,比任何常规下拉菜单都更加完整(这些结果div会带来很多信息)。 但是,我错过了常规HTML元素背后的大部分重要功能,也就是说,我无法在“选项”之间按下或关闭键盘。我该怎么做呢?我知道JavaScript处理键盘事件,但;我一直无法找到一个好的指导如何做到这一点。 (当然,后续问题最终会变成:我可以使用<ENTER>触发onclick事件吗?)
已邀请:

ket

赞同来自:

在我头脑中,我认为你需要在JavaScript中维护某种形式的数据结构,以反映当前下拉列表中的项目。您还需要参考当前活动/选定的项目。 每次触发keyupkeydown时,都会更新对数据结构中活动/选定项目的引用。要在UI上提供突出显示的信息,请根据项目是否处于活动状态或未选中状态,添加或删除通过CSS进行了样式设置的类名称。 此外,这不是一个biggy,但innerHTML并不是真正的标准(查看createTextNode()createElement()appendChild()以获取创建数据的标准方式)。您可能还想了解有关在JavaScript中附加事件处理程序的信息,而不是在HTML属性中这样做。

vomnis

赞同来自:

您需要做的是使用id="results"将事件侦听器附加到div。您可以通过在创建onkeyuponkeydown等属性时将其添加到div中,或者可以使用JavaScript附加这些属性。 我的建议是,您使用像YUIjQueryPrototype等AJAX库有两个原因:

  1. 听起来你正在尝试创建一个Auto Complete控件,这是AJAX库应该提供的大部分内容。如果您可以使用现有的组件,您可以节省大量时间。
  2. 即使您不想使用库提供的控件,所有库都会提供事件库,以帮助隐藏不同浏览器提供的事件API之间的差异。
Forget addEvent, use Yahoo!’s Event Utility提供了一个事件库应该为您提供的很好的总结。我很确定由jQuery,Prototype等提供的事件库。人。提供类似的功能。 如果那篇文章超过了你的头,首先看看this documentation,然后重新阅读原文(我发现文章在使用事件库后变得更有意义)。 其他一些事情:
  • 使用JavaScript为您提供比onkeyup等属性写入HTML更多的控制权。除非你想做一些非常简单的事情,否则我会使用JavaScript。
  • 如果您编写自己的代码来处理键盘事件,则good key code reference非常方便。