jquery key up and down navigation through search results
I have an input box that as you type displays a div called "suggestions" and compiles it with search results, each result is displayed between p tags.
You can select a result using the mouse but I would like to be able to select one using up and down keys.
I have got it so far that if you press down the suggestions box appears again (I know it would already be displayed- but thats another issue), and attepts to add focus to the first p tag. how can I have it so as you keep pressing down it filters through the results lets say adds and removes a class of "active" each time. and obviously the same for going up as well?
I have found so many random plugins but they all seem to complex and bulky for what I am trying to achieve.
$('#search input#q').keypress(function (e) {
switch (e.keyCode) {
// User pressed "up" arrow
case 38:
$('#suggestions').fadeOut('fast');
break;
case 40:
// 开发者_运维知识库User pressed "down" arrow
$('#search input#q').blur();
$('#suggestions').fadeIn();
$('#suggestions p').focus();
}
});
Thanks
Autocomplete is a jQuery team supported widget. It has the ability to select using arrows keys and enter. It is also a simple plugin at its core (with the ability to easily extend functionality).
http://jqueryui.com/demos/autocomplete/
Cheers, awirick
精彩评论