如何使用keyup搜索功能中的箭头导航来滚动顶部？

Question

I have a page where i will have keyup autocomplete search functionality. using arrow navigation i need to scroll down till end. how to add scroll tp function in jquery

Please check with autocomplete

https://jsfiddle.net/os5ko0v8/2/

  $(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 > 2){

                //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('<ul id="res"></ul>');

                    //Prevent redrawing/binding of list
                    drew = true;

                    //Bind click event to list elements in results
                    $("#res").on("click", "li", function(){
                        $("#search").val($(this).text());
                        $("#res").empty();
                     });
                }
                //Clear old results
                else{
                    $("#res").empty();
                }

                //Add results to the list
                for(term in results){
                    $("#res").append("<li>" + results[term] + "</li>");
                }
            }
            //Handle backspace/delete so results don't remain
            else if(drew){
                $("#res").empty();
            }
        });
    });

Answer 1

You can capture the keycode on keyup

  $(document).ready(function(){ var people = ['Peter Bishop', 'Nicholas Brody', 'Gregory House', 'Hank Lawson', 'Tyrion Lannister', 'Nucky Thompson']; var cache = {}; var drew = false; var currentSelection = 0; var navigation = false $("#search").on("keyup", function(event){ switch(event.keyCode) { // User pressed "up" arrow case 38: navigation = true; navigate('up'); break; // User pressed "down" arrow case 40: navigation = true; navigate('down'); break; // User pressed "enter" case 13: navigation = true; $("#search").val($("#res li.selected").text()); $("#res").empty(); break; default: navigation = false; break; } if(navigation == false) { var query = $("#search").val() if($("#search").val().length > 0){ //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('<ul id="res"></ul>'); //Prevent redrawing/binding of list drew = true; //Bind click event to list elements in results $("#res").on("click", "li", function(){ $("#search").val($(this).text()); $("#res").empty(); }); } //Clear old results else{ $("#res").empty(); } //Add results to the list for(term in results){ $("#res").append("<li>" + results[term] + "</li>"); } } //Handle backspace/delete so results don't remain else if(drew){ $("#res").empty(); } } }); }); function navigate(direction) { if($("#res li.selected").size() == 0) { currentSelection = -1; } if(direction == 'up' && currentSelection != -1) { if(currentSelection != 0) { currentSelection--; } } else if (direction == 'down') { if(currentSelection != $("#res li").size() -1) { currentSelection++; } } setSelected(currentSelection); } function setSelected(menuitem) { $("#res li").removeClass("selected"); $("#res li").eq(menuitem).addClass("selected"); } 

 #res { margin: 0px; padding-left: 0px; width: 150px; } #res ul li { list-style-type: none; } #res li:hover { background: #110D3B; color: #FFF; cursor: pointer; } #res li.selected { background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="output"><div> <input id="search" type="text">