javascript - JQuery 搜索框自动建议 - 如何使用箭头键从建议中进行选择,同时仍保持对输入字段的关注

标签 javascript php jquery html css

我有一个具有自动建议功能的搜索框,因此它将建议添加到搜索框下方绝对定位的 div 内的无序列表。这些建议是通过使用 JQuery/PHP 的 ajax 获取的。

一切正常,但有一个警告。必须用鼠标手动单击其中一项建议才能访问链接。

我想要实现的是类似于 google suggest 的东西,其中自动选择顶部选项并且可以使用箭头键向上或向下移动。

我不希望有人为我编写此代码,而只是对实现此目的的最佳方法进行简单的英语描述。我无法理解文本输入如何保持焦点,以及如何通过按回车键选择和访问列表项。

我的一个想法是将“选定”元素的背景颜色设置为与其他元素不同的样式,并将其目标 url 以某种方式存储在其他地方,然后监听 enter 键以使用 JS 重定向到存储的 url。

对于执行此操作的最佳方法,我将不胜感激。提前致谢。

最佳答案

我做过一次。我写了一段代码,逻辑如下:

我创建了一个函数来将“焦点”设置到列表项。该函数接收按键事件的参数。在其中,它会验证 key 是向上 还是向下。如果是,那么它会检查列表是否有更多向下(如果是向下键)或向上(如果是向上键)的选项,如果是,则更改它。此更改是由另一个函数进行的。如果它没有要更改的元素,则保留它。

如果键是 enter,它只会激活操作(url 链接、事件等)。

change 函数可以只接收一个索引,然后它会清除所有元素的“选定”样式并将该样式添加到选定的元素中。在搜索开始时,您只需将更改函数设置为列表的索引 0

恐怕这是主要(几乎完成)的过程。这就是你想要的吗?

关于javascript - JQuery 搜索框自动建议 - 如何使用箭头键从建议中进行选择,同时仍保持对输入字段的关注,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19938140/

相关文章:

php - 让 json 中的每个 "li"成为它自己的链接?

PHP GD - 如何按顺序从 3 个 png 图像创建一个新的 png 图像

javascript - 附加链接上的点击功能不起作用

javascript - 单页点导航

javascript - jquery中如何不重复一个 Action

javascript - foreignObject 显示 :none in Firefox and Chrome

javascript - 克隆按钮无法打开模式

javascript - wheel 事件 javascript 给出不一致的值

php - 以编程方式将子帖子插入 Wordpress

php - 使用 DB 登录 PHP