Flèches du clavier vers le haut et vers le bas

Question

J'ai une recherche de saisie semi-automatique, dans laquelle en tapant quelques caractères, tous les noms correspondant au caractère entré s'affichent. Je remplis ces données dans le jsp en utilisant la balise DIV, en utilisant la souris, je suis capable de sélectionner les noms. Mais je veux sélectionner les noms dans la balise DIV à sélectionner en utilisant la flèche haut et bas du clavier. Quelqu'un peut-il m'aider s'il vous plaît à partir de cela.

Answer 1

Je suppose que vous avez une entrée qui gère l'entrée. Map onkeyup-eventhandler pour cette entrée dans laquelle vous lisez event.keyCode, et faites les choses quand ce sont les keycodes appropriés pour la flèche haut/bas (38, 40), pour garder une référence à quel noeud (item dans votre div) vous déplacez le focus à.

Appelez ensuite le même gestionnaire lorsque vous appuyez sur Entrée (code de clé 13) comme vous le faites sur clic.

Il est difficile de donner un exemple de codage car cela dépend fortement du contexte, mais un conseil sur la façon de naviguer dans votre div est de faire de .nextSibling et .previousSibling, ainsi que .firstChild et .childNodes.

Answer 2

Il ya longtemps que je l'ai fait, mais je suppose que vous pouvez utiliser event.keyCode. Si les valeurs renvoyées sont 38 et 40, l'utilisateur a appuyé sur les flèches vers le haut et vers le bas, respectivement.

Vous devez ensuite sélectionner la ligne au-dessus ou au-dessous de votre position actuelle. Comment sélectionner la rangée dépend de votre situation particulière.

Answer 3

Utilisez les événements onkeydown et onkeyup pour vérifier les événements de presse clés dans vos résultats 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

copier-coller ce morceau de code et essayer ..

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