Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.04.2011, 23:38
Новичок на форуме
Отправить личное сообщение для omvitamin Посмотреть профиль Найти все сообщения от omvitamin
 
Регистрация: 03.04.2011
Сообщений: 3

Подбор варианта из списка 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 взялся совсем недавно.
Ответить с цитированием
  #2 (permalink)  
Старый 04.04.2011, 00:05
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

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

Ну а если по делу, то насколько я знаю в таком механизме списки по моему не используются, а к форме добавляется простой DIV со строками.
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #3 (permalink)  
Старый 04.04.2011, 12:15
Новичок на форуме
Отправить личное сообщение для omvitamin Посмотреть профиль Найти все сообщения от omvitamin
 
Регистрация: 03.04.2011
Сообщений: 3

Думал, что создание форм- это одна из основ.. Поэтому и взялся.
Ответить с цитированием
  #4 (permalink)  
Старый 04.04.2011, 14:07
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

Вы имеете в виду реализацию нечто подобного как в поиске Google, то есть пользователь начинает вводить и ему вылезают подсказки ?
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #5 (permalink)  
Старый 04.04.2011, 14:10
Новичок на форуме
Отправить личное сообщение для omvitamin Посмотреть профиль Найти все сообщения от omvitamin
 
Регистрация: 03.04.2011
Сообщений: 3

Ну да..вроде того. Только гугл выбирает данные из базы, а они у меня уже есть в статическом виде т.е. обычный список select или div стилизованный под список- не важно.
Ответить с цитированием
  #6 (permalink)  
Старый 04.04.2011, 14:21
Профессор
Отправить личное сообщение для Matre Посмотреть профиль Найти все сообщения от Matre
 
Регистрация: 07.01.2011
Сообщений: 582

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

Последний раз редактировалось Matre, 04.04.2011 в 14:24.
Ответить с цитированием
  #7 (permalink)  
Старый 04.04.2011, 14:48
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

<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>
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай

Последний раз редактировалось walik, 04.04.2011 в 15:07.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменение значения input при смене значения select galart jQuery 4 30.01.2015 19:39
при выборе в 1-ом select соот.-щая инф. отображается в другом select celencer Общие вопросы Javascript 1 24.05.2009 20:38
событие на выпадение-скрытие списка select Aderba jQuery 1 03.04.2009 21:51
Firefox: перехватить соббытие при перетаскивании текста no_alex Общие вопросы Javascript 9 21.08.2008 18:02
Динамическое обновление списка select (продолжение мытарств) macam Элементы интерфейса 2 25.06.2008 16:04