0

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

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

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

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

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

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

4

1 回答 1

1

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

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

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

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

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

于 2013-11-12T19:36:37.287 回答