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

我需要帮助完成我自定义的基于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]

它的工作..美丽!看起来比较优雅,比任何常规下拉菜单都更加完整(这些结果div会带来很多信息)。

However, I'm missing the most of important functions behind regular HTML elements, that is, I can't keyboard down or up between "options". How do I do this? I know JavaScript handles keyboard events but; I haven't been able to find a good guide on how to do this. (Of course, the follow up question to this will eventually end up being: can I use to trigger that onclick event?)

0

2 答案

在我头脑中,我认为你需要在JavaScript中维护某种形式的数据结构,以反映当前下拉列表中的项目。您还需要参考当前活动/选定的项目。

每次 keyupkeydown 被触发时,更新对数据结构中活动/选定项目的引用。要在UI上提供突出显示的信息,请根据项目是否处于活动状态或未选中状态,添加或删除通过CSS进行了样式设置的类名称。

此外,这不是一个biggy,但 innerHTML 不是真正的标准(查看 createTextNode()createElement()appendChild()用于创建数据的标准方式)。您可能还想了解有关在JavaScript中附加事件处理程序的信息,而不是在HTML属性中这样做。

0
额外

你需要做的是用 id =“results”将事件监听器附加到 div 。您可以在创建它时将 onkeyuponkeydown 等属性添加到 div ,或者使用JavaScript附加这些属性。

我的建议是,您使用一个AJAX库,如 YUIjQueryPrototype 等有两个原因:

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

Forget addEvent, use Yahoo!?s Event Utility provides a good summary of what an event library should provide for you. I'm pretty sure that the event libraries provided by jQuery, Prototype, et. al. provide similar features.

如果该文章结束,请首先查看此文档,然后重新阅读原文(在使用事件库后,我发现文章变得更有意义)。

其他一些事情:

  • 使用JavaScript为您提供比将 onkeyup 等属性写入HTML更多的控制权。除非你想做一些非常简单的事情,否则我会使用JavaScript。
  • 如果您编写自己的代码来处理键盘事件,则好的关键代码参考非常方便。
0
额外