Javascript-форум - Подбор варианта из списка select при наборе текста

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Подбор варианта из списка select при наборе текста (https://javascript.ru/forum/dom-window/16324-podbor-varianta-iz-spiska-select-pri-nabore-teksta.html)

Подбор варианта из списка select при наборе текста

Здравствуйте, уважаемые.

Вот уже много дней никак не могу найти информации по реализации следующей идеи по выбору города из списка на JS при вводе символов..может кто знает как это реализовать.?

Вобщем, есть простой список select, типа:

<select name="City">
<option value="0" selected="selected">Город который выбран по умолчанию</option>
<option value="1">Город 1</option>
<option value="2">Город 2</option>
<option value="3">Город 3</option>
<option value="4">Город 4</option>
<option value="5">Город 5</option>
<option value="6">Город 6</option>
<option value="7">Город 7</option>
и т .д.
</select>

Хотелось бы оставить эту форму выбора, но к ней приставить еще и поле ввода, которое бы выбирало из этого списка варианты при наборе текста. Возможно ли это?
Не пинайте сильно, за javascript взялся совсем недавно.:(

Цитата:

Сообщение от omvitamin

за javascript взялся совсем недавно.

Тогда лучше не лезь так далеко сразу, возьмись за что то по проще.

Ну а если по делу, то насколько я знаю в таком механизме списки по моему не используются, а к форме добавляется простой DIV со строками.

Думал, что создание форм- это одна из основ.. Поэтому и взялся.

Вы имеете в виду реализацию нечто подобного как в поиске Google, то есть пользователь начинает вводить и ему вылезают подсказки ?

Ну да..вроде того. Только гугл выбирает данные из базы, а они у меня уже есть в статическом виде т.е. обычный список select или div стилизованный под список- не важно.

<select id='cityselect'>
	<option>
		Москва
	</option>
	<option>
		Санкт-Петербург
	</option>
	<option>
		Нижний Новгород
	</option>
	<option>
		Новосибирск
	</option>
	<option>
		Красноярск
	</option>
	<option>
		Хабаровск
	</option>
	<option>
		Хабара
	</option>
</select>

<input type='text' id='cityvalue' />

<script type='text/javascript'>
	var elems = document.getElementById("cityselect").options;
	var similar = function (A, B) {
		for (var i = 0; i < B.length; i++)
			if (A.charAt(i) != B.charAt(i)) break;
		return i;
	};
	document.getElementById("cityvalue").onkeypress = function (event) {
		var max = 0;
		for (var i = 0; i < elems.length; i++) {
			var A = elems[i].innerHTML.replace(/^\s+|\s+$/g, "").toLowerCase(),
			B = (this.value + String.fromCharCode(event.keyCode)).toLowerCase();
			if (similar(A, B) > max)
				elems[i].selected = "selected", max = similar(A, B);
		}
	};
</script>

<html>
<head>
<script type="text/javascript" language="javascript">
var autocomplete = ['Город 1', 'Город 2', 'Город 3', 'Город 4', 'Город 5'];
window.onload = function() {
	document.getElementById('input').onkeyup = keyUp;
}
function keyUp(e) {
	var e = e||window.event;
	switch(e.keyCode) {
		case 40:
			var selected = -1;
			var spans = document.getElementById('autocomplete').getElementsByTagName('span');
			for(i=0;i<=spans.length;i++)
				if (i in spans && spans[i].className == 'selected') {
					spans[i].className = '';
					selected = i;
				}
			selected++;
			for(i=0;i<=spans.length;i++)
				if (i in spans && i == selected) {
					spans[i].className = 'selected';
				}
			break;
		case 38: 
			var spans = document.getElementById('autocomplete').getElementsByTagName('span');
			var selected = spans.length;
			for(i=0;i<=spans.length;i++)
				if (i in spans && spans[i].className == 'selected') {
					spans[i].className = '';
					selected = i;
				}
			selected--;
			for(i=0;i<=spans.length;i++)
				if (i in spans && i == selected) {
					spans[i].className = 'selected';
				}
			break;
		case 13: 
			var spans = document.getElementById('autocomplete').getElementsByTagName('span');
			for(i=0;i<=spans.length;i++)
				if (i in spans && spans[i].className == 'selected') {
					document.getElementById('input').value = spans[i].innerHTML;
					document.getElementById('autocomplete').innerHTML = '';
				}
			break;
		default: 
			var div = document.getElementById('autocomplete');
			div.innerHTML = '';
			if (document.getElementById('input').value.length > 0) {
				autocomplete.forEach(function(elem, index) {
					div.innerHTML += '<span>'+autocomplete[index]+'</span><br />';
				});
			}
	}
}
</script>
<style>
input {
	position: absolute;
	top: 10px;
	left: 150px;
}

#autocomplete {
	position: absolute;
	top: 40px;
	left: 150px;
}

span.selected {
	background-color: red;
}
</style>
</head>
<body>
<input type="text" id="input" />
<div id="autocomplete"></div>
</body>
</html>