Форум

Rooner · #1 (**permalink**) 24.10.2012, 20:33

Имеется живой поиск ajax+php. Как сделать так, чтобы можно было выбирать элементы списка с помощью клавиш, стрелочек? Т.е. жмем стрелку вниз, выделяется верхний элемент и т.д.

Your · #2 (**permalink**) 25.10.2012, 08:17

<!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>

Rooner · #3 (**permalink**) 25.10.2012, 12:03

Your, с этим ясно, а вот как выделить элемент списка: верстка ul li

a_l · #4 (**permalink**) 25.10.2012, 12:13

Цитата:

Your, с этим ясно, а вот как выделить элемент списка: верстка ul li

С помощью getElementsByTagName собрать нужные элементы в массив, инкрементить/декрементить число и изменять стили соответствующего элемента.

Your · #5 (**permalink**) 26.10.2012, 06:34

<!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>

Форум

Справочник

Discord чат

Курсы javascript