How Do I Enable Arrow Navigation On Keyboard For A List Of Div Using Jquery

I am following a tutorial [here][1] to make a Facebook like friend tagging system. But the tutorial lacks the 'arrow navigating' capability like Facebook. I would like to figure ou

Solution 1:

You need to bind keyboard events keyup/keydown and then change the css accordingly to give a feel of move up or move down :

use keyup if you want a single move even on a key press no matter the key is long pressed.

use keydown if you want to move in a cycle fashion as long as user holds the key.

$("#search").keyup(function(e) 
{
        if (e.keyCode == 40) 
        {  
            Navigate(1);
        }
        if(e.keyCode==38)
        {
            Navigate(-1);
        }

});

Check complete code @fiddle: http://jsfiddle.net/MKZSE/77/