Question

我有一个简单的jq代码来创建自动建议（像谷歌一样）。它工作正常，我只想添加键盘事件处理程序。但是我有一些问题。当我想选择事件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％正确，因为我必须做出一些假设，但这种方法应该是正确的。

使用jquery导航（遍历）

1 个答案: