javascript - 如何在 keyup 搜索功能中使用箭头导航滚动顶部？

Question

我有一个页面，其中有 keyup 自动完成搜索功能。使用箭头导航我需要向下滚动直到结束。如何在jquery中添加滚动tp功能

请检查自动完成

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

您可以捕获 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">