Question

i would like to have a DIV list on which the user can navigate by pressing up/down cursor keys and getting event when he changes the current DIV, as it happens in Google Instant results. Do you know if there is a jQuery/JS component to achieve it or any suggestions on the components to use.

Thanks !

Answer 1

Edit

I changed it to use mouseover for highlighting the divs and setting the content of the input on click and the arrow keys. I think this is more similar to Google’s which is what you wanted.

End Edit

I just wrote this for you. I hope you’re able to use it: http://jsfiddle.net/Paulpro/evBkC/8/
It should be easy to modify the css to style it the way you want from there. It highlights a div onclick and detects the up and down arrow keys if the input field has focus. It keeps track of the selectedDiv’s index in a variable called selectedDiv so you can use it if you want. It should be fully cross-browser as far back as IE 5.5 at least and all the other major browsers.

HTML:

<div id="nav">
    <input type="text" />
    <div>Line 1</div>
    <div>Line 2</div>
    <div>Line 3</div>
    <div>Line 4</div>
    <div>Line 5</div>
    <div>Line 6</div>
</div>

CSS:

#nav, #nav input{
  width: 300px; 
}

#nav div{
  width: 150px;    
  margin-left: 75px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  cursor: pointer;
}

Javascript:

var divs = document.getElementById('nav').getElementsByTagName('div'),
selectedDiv = 0,
i;

for(i = 0; i < divs.length; i++){
    divs[i].onmouseover = (function(i){
       return function(){
           divs[selectedDiv].style.backgroundColor = '';
           selectedDiv = i;
           divs[selectedDiv].style.backgroundColor = '#68F';
       }
    })(i);

    divs[i].onclick = function(){
        document.getElementById('nav').
          getElementsByTagName('input')[0].focus();
        document.getElementById('nav').
          getElementsByTagName('input')[0].value = 
            (this.innerText || this.textContent);
    };
}

divs[selectedDiv].style.backgroundColor = '#68F';

document.getElementById('nav').
  getElementsByTagName('input')[0].onkeydown = function(e){
     var x = 0;
     if(e.keyCode == 38)
         x = -1;
     else if(e.keyCode == 40)
         x = 1;
     else
         return;
     divs[selectedDiv].style.backgroundColor = '';
     selectedDiv = ((selectedDiv+x)%divs.length);
     selectedDiv = selectedDiv < 0 ? 
       divs.length+selectedDiv : selectedDiv;
     document.getElementById('nav').
       getElementsByTagName('input')[0].value = 
         (divs[selectedDiv].innerText || divs[selectedDiv].textContent);
     divs[selectedDiv].style.backgroundColor = '#68F';
};

document.getElementById('nav').
  getElementsByTagName('input')[0].focus();