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

Question

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

这一切都很好，有一个警告。必须用鼠标手动点击其中一项建议才能点击链接。

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

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

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

我将不胜感激有关执行此操作的最佳方法的任何想法。提前致谢。

Answer 1

我做过一次。我写了一段代码，逻辑如下：

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

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

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

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