powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / перемещение курсора по списку при нажатии кнопок
5 сообщений из 5, страница 1 из 1
перемещение курсора по списку при нажатии кнопок
    #36496956
EmilRegis
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Здравствуйте...
Помогите пожалуйста, что-то сам сообразить не могу...Требуется сделать примерно так же как в гугле, то есть есть текстовое поле, в него вводится какое-то значение и аджаксом подгружается с сервера список подходящих к значению вариантов..Например ввожу све - выводится Свердловск, Светлоград и т.д...
Основное я сделал, у меня при вводе значений списком заполняется див и делается видимым...
Проблема в том,чтобы при нажатии кнопок вверх, вниз перемещать курсор по этому списку...а при нажатии кнопки enter - вставлять выбранное значение в текстовое поле...
если можно приведите примерчик, желательно без использования разных библиотек

В данный момент сделано так, что данные получаются в формате json, которые вставляются во внешний див в виде собственных дивов
Код: plaintext
1.
2.
3.
4.
<div id="city_list" class="objlist">
  <div>Свердловск</div>
  <div>Светлоград</div>
</div>
...
Рейтинг: 0 / 0
перемещение курсора по списку при нажатии кнопок
    #36497020
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
EmilRegis,

я бы на вашем месте очень внимательно разобрал jquery автокомплит, как там сделано. И наклепал бы что-то подобное.

Навскидку - обрабатывайте onkeydown полем ввода. в Евенте для него можно получить код нажатой клавиши. Если кнопка "вверх" или "вниз" - программно подсвечивать строку.

По событиям ознакомиться тут
...
Рейтинг: 0 / 0
перемещение курсора по списку при нажатии кнопок
    #36497098
EmilRegis
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
в данный момент сделано так
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
<script>
var keyflag = - 1 ;
function insertToTextField(val){
	document.getElementById('city_text').value = val;
	//document.getElementById(regiontype).style.display = 'none';
}
function stylechange(el,bol){
	if(bol){
		el.style.backgroundColor = 'blue';
		el.style.color = 'white';
	}
	else{
		el.style.backgroundColor = 'white';
		el.style.color = 'black';
	}
}

function listkeyclick(list_id,kcode){
	var len = document.getElementById(list_id).childNodes.length; //сколько детишек в списке
	if (len>keyflag+ 1  && (kcode== 40  || kcode== 38 )){
		if (kcode ==  40 ) keyflag++;			//кнопка вниз
		else if (kcode ==  38 ) keyflag--;	//кнопка вверх
		insertToTextField(document.getElementById(list_id).childNodes[keyflag].innerHTML); //вставляем в текстовое поле
		stylechange(document.getElementById(list_id).childNodes[keyflag],true); //меняем стиль выбранного дива
	}
</script>
.................
<div onmouseout = 'city_vis=false;' onmouseover = 'city_vis=true;'> 
       <div id="hide_select" >
	     <input type="text" id="city_text" onkeyup="getObjList('town',this.value);" onclick="clickTextField('town',this.value);"  onkeydown = "listkeyclick('city_list',event.keyCode);" onfocus="keyflag = -1"/>
	</div>
        <div id="city_list" class="objlist" >
	</div>
</div>
но что-то работает не так как хотелось бы)
при нажатии на кнопку вниз - вставляется в текстовое поле и вместо списка остаётся единственное выбранное значение
...
Рейтинг: 0 / 0
перемещение курсора по списку при нажатии кнопок
    #36499285
EmilRegis
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
решил не изобретать велосипед и заюзать jquery...
сколько не искал в интернете везде в jquery-компоненте посылается get-запрос на сервер...
есть ли аналог, посылающий post-запрос?
...
Рейтинг: 0 / 0
перемещение курсора по списку при нажатии кнопок
    #36499288
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
EmilRegisесть ли аналог, посылающий post-запрос?1) Нафига?
2) Перепиши компонент. Замени $.get на $.post . Не более чем.
...
Рейтинг: 0 / 0
5 сообщений из 5, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / перемещение курсора по списку при нажатии кнопок
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]