Jquery arrow key navigation

I have these textfield and dropdown menu for a Facebook like autosuggestion:

<input type="text" id="search" name="search_fld"/&开发者_JAVA百科gt;

<div id="display">
<div class="display_box">Luca</div>
<div class="display_box">David</div>
<div class="display_box">Mark</div>
<div class="display_box">...</div>
</div>

My CSS:

.display_box:hover
{
  background:#3b5998;
  color:#FFFFFF;
}

How can I achieve to pass the 'hover' state with down arrow key from my input "search_fld" to the first 'display_box' and so on for all the "display" divs?

Here is a link the jsfiddle code.

---

You can't emulate the hover state perfectly.. there's no escape from adding "real" class with the same style:

.display_box_hover, .display_box:hover
{
  background:#3b5998;
  color:#FFFFFF;
}

Now this code will "naviage" the elements:

window.displayBoxIndex = -1;

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

});

var Navigate = function(diff) {
    displayBoxIndex += diff;
    var oBoxCollection = $(".display_box");
    if (displayBoxIndex >= oBoxCollection.length)
         displayBoxIndex = 0;
    if (displayBoxIndex < 0)
         displayBoxIndex = oBoxCollection.length - 1;
    var cssClass = "display_box_hover";
    oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass);
}

This will "remember" the index of the last "selected" element and switch to next or previous element, using the eq() function and adding the class from above to that selected element.

Updated jsFiddle.

---

Sure it's ugly. On fiddle here.

<script src="jquery.js"></script>

<script>
$(function (){

        $('.display_box').hover(function (){            
            $(this).attr('class', 'display_box current')
        }, function (){
            $(this).attr('class', 'display_box');
        });

        $('#search').keyup(
            function (e){
                var curr = $('#display').find('.current');
                if (e.keyCode == 40) 
                {                                   
                    if(curr.length)
                    {
                            $(curr).attr('class', 'display_box');
                            $(curr).next().attr('class', 'display_box current');
                    }
                    else{
                        $('#display div:first-child').attr('class', 'display_box current');
                    }                   
                }
                if(e.keyCode==38)
                {                                       
                    if(curr.length)
                    {                           
                            $(curr).attr('class', 'display_box');
                            $(curr).prev().attr('class', 'display_box current');
                    }
                    else{
                        $('#display div:last-child').attr('class', 'display_box current');
                    }           
                }
            }       
        )

    });
</script>
<style>
.current{
  background:#3b5998;
  color:#FFFFFF;
}
</style>

<input type="text" id="search" name="search_fld"/>
<div id="display">
<div class="display_box current">Luca</div>
<div class="display_box">David</div>
<div class="display_box">Mark</div>
<div class="display_box">...</div>
</div>

---

For implementing autosuggestion text field, it would be better to use 'datalist' tag as below:

<input list="search" name="search_fld"/>
  <datalist id="search">
     <option value="Luca"/>
     <option value="David"/>
     <option value="Mark"/>
  </datalist>

Get more details on datalist tag from here: http://www.w3schools.com/tags/tag_datalist.asp

---

you may use an arrow key as input field background using css/use an overlay span over the input field with background arrow image and make it visible in hover state using css or js