Javascript 使用jquery导航（遍历）

我有一个简单的jq代码来创建自动建议（类似谷歌）。它工作正常，我只想添加键盘事件处理程序。但是我有一些问题。当我想用事件40（箭头向下）选择下一个建议时，它会得到所有建议，而不仅仅是下一个建议。知道怎么修吗

$（文档）.ready（函数（）{
var people=['Peter Bishop'，'Nicholas Brody'，'Gregory House'，'Hank Lawson'，'Tyrion Lannister'，'Nucky Thompson']；
var cache={}；
var=false；
$（“#搜索”）。在（“键控”，函数（事件）{
var query=$（“#搜索”）.val（）
if（$（“#搜索”）.val（）.length）{
//检查我们以前是否搜索过此术语
if（缓存中的查询）{
结果=缓存[查询]；
}
否则{
//对我们的人员数组进行不区分大小写的搜索
var results=$.grep（人员、职能（项目）{
返回项。搜索（RegExp（查询，“i”）！=-1；
});
//将结果添加到缓存
缓存[查询]=结果；
}
//第一次搜索
如果（drew==false）{
//创建结果列表
$（“#搜索”）。在（“”）之后；
//防止重新绘制/绑定列表
德鲁=真；
//绑定单击事件以列出结果中的元素
$（“#res”）。在（“单击”、“div”、函数（）上{
$（“#搜索”）.val（$（this.text（））；
$（“#res”）.empty（）；
});
$（“#搜索”）.keydown（函数（事件）{
如果（event.which==40）{
$（“#搜索”）.val（$（“.suggestions”）.next（）.text（））；
}						
});
}
//清除旧结果
否则{
$（“#res”）.empty（）；
}
//将结果添加到列表中
对于（结果中的术语）{
$（“#res”）。追加（“+结果[术语]+”）；
}
}
//处理退格/删除，使结果不会保留
否则，如果（drew）{
$（“#res”）.empty（）；
}
});
});
您需要跟踪当前选择的建议。最简单的方法可能是添加/删除类名，如下所示：

if(drew == false){
    //Prevent redrawing/binding of list
    drew = true;
    //Create list for results, and bind click event to list elements in results
    var $res = $('<div id="res"></div>').insertAfter("#search")
        .on("click", "div", function() {
            $(".suggestions").removeClass('selected');
            $("#search").val($(this).addClass('selected').text());
            $("#res").empty();
    });
    var $search = $("#search").keydown(function(event) {
        var $suggestions, $selected, index;
        if (event.which == 40) {
            $suggestions = $(".suggestions");
            $selected = $suggestions.find('.selected').eq(0);//.eq(0) shouldn't be necessary, but just in case ...
            if($selected.length) {
                index = ($selected.index() + 1) % $suggestions.length;//assuming the suggestions are siblings
            } else {
                index = 0;
            }
            $(".suggestions").removeClass('selected');
            $search.val($(".selected").eq(index).addClass('selected').text());                       
        }
    });
} else { //Clear old results
    $("#res").empty();
}

if（draw==false）{
//防止重新绘制/绑定列表
德鲁=真；
//为结果创建列表，并绑定单击事件以列出结果中的元素
var$res=$（''）.insertAfter（“#搜索”）
.on（“单击”，“div”，函数（）{
$（“.suggestions”）.removeClass（'selected'）；
$（“#搜索”）.val（$（this.addClass（'selected'）.text（））；
$（“#res”）.empty（）；
});
var$search=$（“#search”）.keydown（函数（事件）{
var$建议，$选定，索引；
如果（event.which==40）{
$suggestions=$（“.suggestions”）；
$selected=$suggestions.find（'.selected'）.eq（0）；//.eq（0）应该不是必需的，只是以防万一。。。
如果（$selected.length）{
index=（$selected.index（）+1）%$suggestions.length；//假设建议是同级的
}否则{
指数=0；
}
$（“.suggestions”）.removeClass（'selected'）；
$search.val（$（“.selected”）.eq（index.addClass（'selected'）.text（））；
}
});
}else{//清除旧结果
$（“#res”）.empty（）；
}

我不确定这是否100%正确，因为我已经做了一些假设，但方法应该是正确的。
如果
$（“.suggestions”）
匹配多个元素，我相信
next（）
将为每个元素返回下一个节点。嗯。。。是的，你说得对。现在我得想办法解决这个问题。谢谢！