javascript - sirve - on keydown function event

Teclado arriba y abajo de las flechas

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

Mucho tiempo desde que hice esto, pero supongo que puedes 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 2

Supongo que tiene una entrada que maneja la entrada.

mapear onkeyup-eventhandler para esa entrada en la que lee event.keyCode, y hacer cosas cuando son los códigos clave apropiados para arriba / abajo-flecha (38, 40), para mantener una referencia a qué nodo (elemento en su div) mover 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 3

copia y pega esta pieza de código y prueba ...

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

Answer 4

Use los eventos onkeydown y onkeyup para verificar eventos de pulsación de tecla en su div de resultados:

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
}