Стрелки вверх и вниз клавиатуры

скопируйте и вставьте эту часть кода и попытки..

<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>

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

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
}

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

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

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

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

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

Затем назовите тот же обработчик, когда Вы совершаете нападки, входят (код клавиши 13), поскольку Вы делаете onclick.

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