Javascript 键盘上下箭头

我有一个自动完成搜索，通过键入几个字符，它将显示所有与输入字符匹配的名称。我使用DIV标记在jsp中填充这些数据，通过使用鼠标我能够选择名称。但是我想使用键盘上下箭头选择要选择的DIV标记中的名称。有谁能帮我解决这个问题。

我假设您有一个处理输入的输入

为读取event.keyCode的输入映射onkeyup eventhandler，并在向上/向下箭头（38，40）的键码合适时执行操作，以保留将焦点移动到哪个节点（div中的项）的引用

然后在按enter键（键代码13）时调用与onclick相同的处理程序

---

很难给出一个编码示例，因为它高度依赖于上下文，但是关于如何在div中导航的技巧是让我们使用.nextSibling和.previousSibling，以及.firstChild和.childNodes。

我这么做已经很久了，但我想您可以使用

event.keyCode

如果返回的值为38和40，则用户分别按下了向上和向下箭头

---

然后，您必须选择当前位置上方或下方的行。如何选择行取决于您的具体情况。

使用

onkeydown

和

onkeydup

事件检查结果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>

div.active{
背景：浅蓝色
}
1.
2.
3.
4.
5.
6.
7.
8.
9
10
var ScrollLength=19；
函数自动完成（textBoxId，containerDivId）{
var ac=这个；
this.textbox=document.getElementById（textBoxId）；
this.div=document.getElementById（containerDivId）；
this.list=this.div.getElementsByTagName（'div'）；
this.pointer=null；
this.textbox.onkeydown=函数（e）{
e=e | | window.event；
开关（e.keyCode）{
案例38://以上
ac.selectDiv（-1）；
打破
案例40://向下
ac.selectDiv（1）；
中断；}
}    
this.selectDiv=函数（inc）{
如果（this.pointer>1）{
scrollDiv（）；
}
if（this.pointer==0）
document.getElementById（“父”）.scrollTop=0；
如果（this.pointer！==null&&this.pointer+inc>=0&&this.pointer+inc

好的。。。这是。。函数showKeyCode（e）{alert（“按下的键的keyCode：”+e.keyCode）；}在DIV标记中，您将像这样调用上面的方法：onkeydown=“showKeyCode（event）；”我猜这应该可以工作。