使用jQuery導航（遍歷）

Question

我有一個簡單的jq代碼來創建自動建議（類似於Google）。 它工作正常，我只想添加鍵盤事件處理程序。 但是我有一些問題。 當我想選擇事件40（向下箭頭）的下一個建議時，它將獲得所有建議，而不僅僅是下一個。 知道如何解決嗎？

  $(document).ready(function(){ var people = ['Peter Bishop', 'Nicholas Brody', 'Gregory House', 'Hank Lawson', 'Tyrion Lannister', 'Nucky Thompson']; var cache = {}; var drew = false; $("#search").on("keyup", function(event){ var query = $("#search").val() if($("#search").val().length){ //Check if we've searched for this term before if(query in cache){ results = cache[query]; } else{ //Case insensitive search for our people array var results = $.grep(people, function(item){ return item.search(RegExp(query, "i")) != -1; }); //Add results to cache cache[query] = results; } //First search if(drew == false){ //Create list for results $("#search").after('<div id="res"></div>'); //Prevent redrawing/binding of list drew = true; //Bind click event to list elements in results $("#res").on("click", "div", function(){ $("#search").val($(this).text()); $("#res").empty(); }); $("#search" ).keydown(function( event ) { if ( event.which == 40 ) { $("#search").val($(".suggestions").next().text()); } }); } //Clear old results else{ $("#res").empty(); } //Add results to the list for(term in results){ $("#res").append("<div class = 'sugestions'>" + results[term] + "</div>"); } } //Handle backspace/delete so results don't remain else if(drew){ $("#res").empty(); } }); }); 

 <input id="search" type="text"> 

Answer 1

您需要跟蹤當前選擇的建議。 最簡單的方法可能是添加/刪除className，如下所示：

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();
}

不確定是否100％正確，因為我不得不做一些假設，但是這種方法應該是正確的。