<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<style type="text/css">
.ul{list-style-type:none;}
.ul li{dislpay:block;}
.active{background:#888888;}
</style>
</head>
<body>
<ul class="ul">
<li>
Пункт меню
</li>
<li>
Пункт меню
</li>
<li>
Пункт меню
</li>
</ul>
<input type="text" name="search" onkeydown="onKeyDown(event)" autocomplete="off">
<script type="text/javascript">
var arrayLi=[];
$('.ul li').each(function() {
arrayLi.push($(this));
});
var i=0,
number='',
count='undefined'!==typeof arrayLi?(arrayLi.length-1):0;
function onKeyDown(event) {
//event=fixEvent(event);
if(count!=0) {
if(38==event.keyCode) {
if(0<number) {
arrayLi[number].removeClass('active');
--number;
--i;
arrayLi[number].addClass('active');
}
} else if(40==event.keyCode) {
if(i!=count) {
if(arrayLi[i].hasClass('active') && i<count) {
++i;
}
for(var l in arrayLi) {
if(number==l) {
arrayLi[number].removeClass('active');
}
if(l==i) {
number=i;
arrayLi[i].addClass('active');
}
}
}
}
} else {
return;
}
}
</script>
</body>
</html>