jquery - jQuery 自动完成 - 关键结果

Question

我正在创建一个带有单个文本框字段的简单自动完成表单。在每次键入时，我都会循环浏览一个 DB 表并填充一个 DIV (#listKeywords) - 位于文本框的正下方。

这是结果的样子......

<div id="listKeywords">
    <div class="acListItem">Product 1</div>
    <div class="acListItem">Product 2</div>
    <div class="acListItem">Product 3</div>
</div>

如果我单击任何结果，该结果将填充文本框（根据需要）。如果我按下键盘上的向下箭头，什么也不会发生。

问：我如何将键盘功能合并到我按下向下箭头并将焦点放在 listKeywords DIV 中的第一个项目/产品上？

Answer 1

在我看来，您只需处理文本框的 keyup 事件并使用特殊类更改您的 div 项目，使其看起来好像它们已被选中。