Flechas arriba y abajo del teclado

Question

Tengo una búsqueda autocompletada, en la que al escribir algunos caracteres se mostrarán todos los nombres, que coinciden con el carácter introducido. Estoy llenando estos datos en el jsp usando la etiqueta DIV, usando el mouse, puedo seleccionar los nombres. Pero quiero seleccionar los nombres en la etiqueta DIV que se seleccionarán usando la flecha hacia arriba y hacia abajo del teclado. ¿Alguien puede por favor ayudarme con esto?

Answer 1

Supongo que tiene una entrada que maneja la entrada.

map onkeyup-eventhandler para esa entrada en la que lee event.keyCode, y hace cosas cuando se trata de los códigos clave apropiados para arriba/abajo-flecha (38, 40), para mantener una referencia a qué nodo (elemento en su div) mueve el foco a.

Luego llame al mismo controlador cuando presione enter (keyCode 13) como lo hace al hacer clic.

Es difícil dar un ejemplo de codificación porque depende mucho del contexto, pero un consejo sobre cómo navegar a través de su div es hacernos de .nextSibling y .previousSibling, así como .firstChild y .childNodes.

Answer 2

Mucho tiempo desde que hice esto, pero supongo que puede usar event.keyCode.

Si los valores devueltos son 38 y 40, entonces el usuario ha presionado las flechas hacia arriba y hacia abajo, respectivamente.

Luego debe seleccionar la fila arriba o debajo de su posición actual. Cómo seleccionar la fila dependerá de su situación particular.

Answer 3

Usar los eventos onkeydown y onkeyup para comprobar si hay eventos de pulsación de teclas en sus resultados 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 
} 

Answer 4

copia y pega este fragmento de código y tratar ..

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