Geek Answers Handbook

JQuery keyboard navigation

I have a text box and a drop-down menu for "Facebook" as an auto-creature:

<input type="text" id="search" name="search_fld"/> <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 pass a 'hover'state with a down arrow from my input “search_fld” to the first “display_box”, etc. for all "displayed" sections?

here's jsfiddle : http://jsfiddle.net/MKZSE/

thanks Luca

+7
source share
4 answers

You cannot emulate the hang state perfectly .. there is no way out of adding a "real" class with the same style:

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

Now this code will "move" 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 the next or previous element using the eq() function and adding a class on top of that selected element.

Updated jsFiddle .

+9
source

Of course this is ugly. The violin is 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>
+4
source

To implement an autocompletion text field, it is better to use the "datalist" tag, as shown below:

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

Get more information about the datalist tag: http://www.w3schools.com/tags/tag_datalist.asp

+1
source

you can use the arrow key as the background of the input field using css / use the overlay range above the input field with the image of the background arrow and make it visible in the hover mode using css or js

0
source

More articles:


All Articles