Клавиатура со стрелками вверх и вниз

Я предполагаю, что у вас есть ввод, который обрабатывает ввод.

map onkeyup-eventhandler для того ввода, в котором вы читаете event.keyCode, и делать что-то, когда это соответствующие коды клавиш для стрелки вверх / вниз (38, 40), чтобы сохранить ссылку на какой узел (элемент в вашем div) вы переместите фокус на.

Затем вызовите тот же обработчик, когда вы нажмете Enter (keyCode 13), что и onclick.

Трудно привести пример кода, потому что он сильно зависит от контекста, но совет о том, как перемещаться по вашему div, состоит в том, чтобы сделать нас из .nextSibling и .previousSibling, а также .firstChild и .childNodes.

Давненько я этим не занимался, но думаю, вы можете использовать event.keyCode.

Если возвращены значения 38 и 40, значит, пользователь нажал стрелки вверх и вниз соответственно.

Затем вам нужно выбрать строку выше или ниже вашей текущей позиции. Как выбрать строку будет зависеть от вашей конкретной ситуации.

Используйте события onkeydown и onkeyup для проверки событий нажатия клавиш в div результатов:

var UP = 38;
var DOWN = 40;
var ENTER = 13;

var getKey = function(e) {
  if (window.event) { return e.keyCode; }  // IE
  else if (e.which) { return e.which; }    // Netscape/Firefox/Opera
};


var keynum = getKey(e);

if (keynum === UP) {
  //Move selection up
}

if (keynum === DOWN) {
  //Move selection down
}

if (keynum === ENTER) {
  //Act on current selection
}

скопируйте и вставьте этот фрагмент кода и попробуйте ..

<style>
div.active{ 
        background: lightblue
}
</style>
<center>
<input type = "text" id = "tb">
<div id = "Parent" style = "position:absolute;display:block;left:428px; width:146px;top:38px; height:100px; border: 2px solid lightblue; overflow:auto;">  
<div id = "childOne">1 </div>     
<div id = "childOne">2 </div>     
<div id = "childOne">3 </div>     
<div id = "childOne">4 </div>
<div id = "childOne">5 </div>
<div id = "childOne">6 </div>
<div id = "childOne">7 </div>
<div id = "childOne">8 </div>
<div id = "childOne">9 </div>
<div id = "childOne">10 </div>
</div>
</center>
<script type = "text/javascript">
    var scrolLength = 19;
    function autocomplete( textBoxId, containerDivId ) { 
        var ac = this;    
        this.textbox     = document.getElementById(textBoxId);    
        this.div         = document.getElementById(containerDivId);    
        this.list        = this.div.getElementsByTagName('div');    
        this.pointer     = null;    
        this.textbox.onkeydown = function( e ) {
            e = e || window.event;        
            switch( e.keyCode ) {            
            case 38: //up                
                ac.selectDiv(-1);                
            break;            
            case 40: //down                
                ac.selectDiv(1);                
            break;        }    
            }    

            this.selectDiv = function( inc ) {        
                 if (this.pointer > 1){
                     scrollDiv();
                 }
                 if (this.pointer == 0)
                    document.getElementById("Parent").scrollTop = 0;   
                if ( this.pointer !== null && this.pointer+inc >= 0 && this.pointer+inc < this.list.length ) { 
                    this.list[this.pointer].className = '';            
                    this.pointer += inc;            
                    this.list[this.pointer].className = 'active';            
                    this.textbox.value = this.list[this.pointer].innerHTML; 
                }
                if ( this.pointer === null ) {            

                    this.pointer = 0;            
                    scrolLength = 20;
                    this.list[this.pointer].className = 'active';            
                    this.textbox.value = this.list[this.pointer].innerHTML;        
                }    
            }
            function scrollDiv(){
                 if (window.event.keyCode == 40){
                     document.getElementById("Parent").scrollTop = scrolLength;
                     scrolLength = scrolLength + 19;  
                 }           
                 else if (window.event.keyCode == 38){

                     scrolLength = scrolLength - 19;  
                     document.getElementById("Parent").scrollTop = scrolLength;

                 }
            }
        } 
    new autocomplete( 'tb', 'Parent' );
</script>