JQuery搜索框autosuggest - 如何使用箭头键选择建议,同时仍然保持对输入字段的关注

时间:2013-11-12 19:26:02

标签: javascript php jquery html css

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

这一切都很好,有一点需要注意。必须用鼠标手动点击其中一条建议才能跟踪链接。

我想要达到的目标类似于谷歌建议自动选择顶部选项,并且可以使用箭头键向上或向下移动。

我不希望有人为我编写此代码,但只是简单的英文描述了解这个问题的最佳方法。我无法理解文本输入如何保持焦点,以及通过按Enter键也可以选择和访问列表项。

我曾经想到的一种方法是将“选定”项目的背景颜色设置为与其他项目不同,并以某种方式将其存储在目标网址中,然后使用JS监听输入的按键以重定向到存储的网址。

对于这样做的最佳方式,我将不胜感激。提前谢谢。

1 个答案:

答案 0 :(得分:1)

我做过一次。我用以下逻辑编写了一个代码:

我创建了一个将“焦点”设置为列表项的功能。该函数接收到键事件的参数。在其中,它验证了密钥是否 up down 。如果是,那么它检查列表是否有更多的itens下降(如果是向下键)或上升(如果是向上键),如果是,则更改它。这一变化是由另一个功能完成的。如果没有要更改的项目,juts会保留它。

如果密钥是输入,它只会激活操作(网址链接,事件,等等)。

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

我担心这是主要的(几乎完全的)过程。这就是你想要的吗?