Клавиши стрелки для выбора элементов в div
Имеется живой поиск ajax+php. Как сделать так, чтобы можно было выбирать элементы списка с помощью клавиш, стрелочек? Т.е. жмем стрелку вниз, выделяется верхний элемент и т.д.
 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<script type="text/javascript">
function onKeyDown(event) {
//event=fixEvent(event);
if(event.keyCode==38) {
alert('Стрелочка вверх!');
} else if(event.keyCode==40) {
alert('Стрелочка вниз!');
}
}
</script>
</head>
<body>
<input type="text" name="search" onkeydown="onKeyDown(event)">
</body>
</html>
|
Your, с этим ясно, а вот как выделить элемент списка: верстка ul li
|
Цитата:
|
<!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>
|
| Часовой пояс GMT +3, время: 01:18. |