Keyboard up and down arrows.

Question

Hi,

I have one autocomplete search, in which by typing few characters it will show all the names, which matches the entered character. I am populating this data in the jsp using DIV tag, by using mouse I'm able to select the names. But I want to select the names in the DIV tag to be selected using the keyboard up and down arrow. Can anyone please help me out from this.

Thanks, Ram

Answer 1

I assume that you have an input which handles the input.

map onkeyup-eventhandler for that input in which you read out event.keyCode, and do stuff when it's the appropriate keycodes for up/down-arrow (38, 40), to keep a reference to which node (item in your div) you move the focus to.

Then call the same handler when you hit enter (keyCode 13) as you do onclick.

It's hard to give a coding-example because it highly depend on context, but a tip on how to navigate through your div is to make us of .nextSibling and .previousSibling, aswell as .firstChild and .childNodes.

Answer 2

Long time since I did this, but I guess you can use event.keyCode.

If the values returned are 38 and 40, then the user has pressed the up and down arrows respectively.

You then have to select the row above or below your current position. How to select the row would depend on your particular situation.

Answer 3

Hay Rammohan

Are you able to fix the problem... can you please post the sample code if you have done it. I am a newbie to Javascript. I tried to implement what jishi mentioned, but I am going nowhere.

Thanks George

Answer 4

Use the onkeydown and onkeyup events to check for keypresses in your results div.

var keynum = 0;

if(window.event) { keynum = e.keyCode; }  // IE (sucks)
else if(e.which) { keynum = e.which; }    // Netscape/Firefox/Opera

if(keynum == 38) { // up
    //Move selection up
}

if(keynum == 27) { // down
    //Move selection down
}

if(keynum == 13) { // enter
    //Act on current selection
}

I use a listbox inside of a div for autosuggest results. Then, on the listbox, set

onkeyup = "checkKeys(this);"
onblur  = "hideSearchResults(this);"

Answer 5

Hi EndangeredMassa

Thanks a lot for you reply. My problem even before this. Just like the Rammohan, I am trying to create a Autofill textbox. When the user types in few characters, i display the values in a DIV tag. Now if user clicks on down arrow, I need to bring his focus to the DIV tag and select the first item in the DIV tag. As I said earlier, I am a newbie to Javascript side. Any help will be greatly appreciated.

Thanks a lot George

Answer 6

copy and paste this piece of code and try..

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

Hi Guys, the problem is resolved now, i enable the up and down arrows in my javascript, through which i am popukating the div..

Thanks, Rammohan

Answer 8

Rammohan can you paste your solution please? thanks