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

Question

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

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

我想要实现的是类似于谷歌建议自动选择顶部选项的地方，并且可以使用箭头键向上或向下移动。

我不希望有人为我编写此代码，而只是简单地描述解决此问题的最佳方法。 我无法理解文本输入如何保持焦点以及列表项如何通过按下 Enter 键被选择和访问。

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

我将不胜感激有关做到这一点的最佳方法的任何想法。 提前致谢。

Answer 1

我已经做过一次了。 我写了一个具有以下逻辑的代码：

我创建了一个函数来将“焦点”设置为列表项。 此函数接收键事件的参数。 在里面，它验证密钥是up还是down 。 如果是，则检查列表是否有更多的向下（在向下键的情况下）或向上（在向上键的情况下）的项目，如果是，则更改它。 此更改是由另一个函数进行的。 如果它没有要更改的项目，则保留它。

如果键是enter ，它只会激活操作（网址链接、事件等）。

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

恐怕这是主要（几乎完整）的过程。 这就是你想要的吗？