Показать сообщение отдельно
  #4 (permalink)  
Старый 11.11.2013, 12:15
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,932

Сделал небольшой набросок за полчаса

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Input Autocomplete</title>
<style type="text/css">
.AutoComplete {
	position: relative;
	width: 200px;
}
.AutoComplete > * {
	width: 100%;
}
.AutoComplete > ul {
	background: #FFF;
	border-radius: 10px;
	box-shadow: 0 0 10px #000;
	display: none;
	margin: 5px 0 0 0;
	padding: 5px 0;
	position: absolute;
}
.AutoComplete li {
	display: block;
	padding: 0 5px;
}
.AutoComplete li:hover {
	background: #AAA;
	cursor: pointer;
}
</style>
</head>

<body>
<div class="AutoComplete">
	<input type="text" />
	<ul></ul>
</div>

<script type="text/javascript">
window.onload = function () {
	var data = ['Арбуз', 'Апельсин', 'Ананас', 'Банан', 'Виноград', 'Вишня'],
		input = document.querySelector('.AutoComplete > input'),
		list = input.nextElementSibling;
		
	input['oninput' in input ? 'oninput' : 'onpropertychange'] = function () {
		var li = '',
			val = this.value.toLowerCase();
			
		if(val.length < 3) list.style.display = 'none';
		else data.forEach(function(i) {
			if(!i.toLowerCase().indexOf(val)) li += '<li>' + i + '</li>';
		});
		
		if(li) {
			list.innerHTML = li;
			list.style.display = 'block';
		}
		else list.style.display = 'none';
	}
	
	list.onclick = function(e) {
		e = e || window.event;
		e = e.target || e.srcElement;
		if(e.tagName == 'LI') {
			input.value = e.textContent;
			this.style.display = 'none';
		}
	}
}
</script>
</body>
</html>
Ответить с цитированием