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

Question

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

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

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

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

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

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

Answer 1

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

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

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

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

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