Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 13.01.2015, 10:21   #1
Veronika_BB
Новичок
Джуниор
 
Регистрация: 13.01.2015
Сообщений: 3
По умолчанию searchfield - адаптация авто заполнения для двух полей

Добрый день!

Начну с того, что js для меня является темным лесом, из-за чего приходится адаптировать готовые варианты, найденные в сети по требованию начальства

Ситуация в следующем. Есть форма:

Код HTML:
<form method="post" action="">
<input type="text" id="searchfield" name="ot" placeholder="Город вылета">
<input type="text" id="searchfield" name="ot" placeholder="Город прилета">
<input type="submit" value="Показать">
</form>
Задача: человек начинает вводить данные в текстовое поле, выбирая откуда он будет вылетать и ему выходят подсказки по первым буквам. На основании подсказок, он выбирает нужный город. Тоже самое происходит и с городом прилета.

Я пробовала использовать jquery autocomplete, но что-то у меня с ним не сложилось - не срабатывал скрипт.

Нашла вот такой вариант в сети:

[[смотрите сообщение ниже - не дает объем скрипта]]

Этот скрипт работает и подгружает в поле города Вылета.

Вопрос: Каким образом можно сделать поиск этих городов и для поля "Город прилета"?
Veronika_BB вне форума Ответить с цитированием
Старый 13.01.2015, 10:22   #2
Veronika_BB
Новичок
Джуниор
 
Регистрация: 13.01.2015
Сообщений: 3
По умолчанию

Код HTML:
this.searchfield = function(){

	// идентификатор котрый мы присвоили полю
	var id = "searchfield";
	
	// Надпись в поле до клика на него мышкой
	var defaultText = "Город вылета";
	
	var suggestion = true;
	
	// А здесь через запятую перечислены все возможные варианты
	var suggestionText = "Москва, Санкт-Петербург, и т.д."; 

	var field = document.getElementById(id);	
	var classInactive = "sf_inactive";
	var classActive = "sf_active";
	var classText = "sf_text";
	var classSuggestion = "sf_suggestion";
	this.safari = ((parseInt(navigator.productSub)>=20020000)&&(navigator.vendor.indexOf("Apple Computer")!=-1));
	if(field && !safari){
		field.value = defaultText;
		field.c = field.className;		
		field.className = field.c + " " + classInactive;
		field.onfocus = function(){
			this.className = this.c + " "  + classActive;
			this.value = (this.value == "" || this.value == defaultText) ?  "" : this.value;
		};
		field.onblur = function(){
			this.className = (this.value != "" && this.value != defaultText) ? this.c + " " +  classText : this.c + " " +  classInactive;
			this.value = (this.value != "" && this.value != defaultText) ?  this.value : defaultText;
			clearList();
		};
		if (suggestion){
			
			var selectedIndex = 0;
						
			field.setAttribute("autocomplete", "off");
			var div = document.createElement("div");
			var list = document.createElement("ul");
			list.style.display = "none";
			div.className = classSuggestion;
			list.style.width = field.offsetWidth + "px";
			div.appendChild(list);
			field.parentNode.appendChild(div);	

			field.onkeypress = function(e){
				
				var key = getKeyCode(e);
		
				if(key == 13){ // enter
					selectList();
					selectedIndex = 0;
					return false;
				};	
			};
				
			field.onkeyup = function(e){
			
				var key = getKeyCode(e);
		
				switch(key){
				case 13:
					return false;
					break;			
				case 27:  // esc
					field.value = "";
					selectedIndex = 0;
					clearList();
					break;				
				case 38: // up
					navList("up");
					break;
				case 40: // down
					navList("down");		
					break;
				default:
					startList();			
					break;
				};
			};
			
			this.startList = function(){
				var arr = getListItems(field.value);
				if(field.value.length > 0){
					createList(arr);
				} else {
					clearList();
				};	
			};
			
			this.getListItems = function(value){
				var arr = new Array();
				var src = suggestionText;
				var src = src.replace(/, /g, ",");
				var arrSrc = src.split(",");
				for(i=0;i<arrSrc.length;i++){
					if(arrSrc[i].substring(0,value.length).toLowerCase() == value.toLowerCase()){
						arr.push(arrSrc[i]);
					};
				};				
				return arr;
			};
			
			this.createList = function(arr){				
				resetList();			
				if(arr.length > 0) {
					for(i=0;i<arr.length;i++){				
						li = document.createElement("li");
						a = document.createElement("a");
						a.href = "javascript:void(0);";
						a.i = i+1;
						a.innerHTML = arr[i];
						li.i = i+1;
						li.onmouseover = function(){
							navListItem(this.i);
						};
						a.onmousedown = function(){
							selectedIndex = this.i;
							selectList(this.i);		
							return false;
						};					
						li.appendChild(a);
						list.setAttribute("tabindex", "-1");
						list.appendChild(li);	
					};	
					list.style.display = "block";				
				} else {
					clearList();
				};
			};	
			
			this.resetList = function(){
				var li = list.getElementsByTagName("li");
				var len = li.length;
				for(var i=0;i<len;i++){
					list.removeChild(li[0]);
				};
			};
			
			this.navList = function(dir){			
				selectedIndex += (dir == "down") ? 1 : -1;
				li = list.getElementsByTagName("li");
				if (selectedIndex < 1) selectedIndex =  li.length;
				if (selectedIndex > li.length) selectedIndex =  1;
				navListItem(selectedIndex);
			};
			
			this.navListItem = function(index){	
				selectedIndex = index;
				li = list.getElementsByTagName("li");
				for(var i=0;i<li.length;i++){
					li[i].className = (i==(selectedIndex-1)) ? "selected" : "";
				};
			};
			
			this.selectList = function(){
				li = list.getElementsByTagName("li");	
				a = li[selectedIndex-1].getElementsByTagName("a")[0];
				field.value = a.innerHTML;
				clearList();
			};			
			
		};
	};
	
	this.clearList = function(){
		if(list){
			list.style.display = "none";
			selectedIndex = 0;
		};
	};		
	this.getKeyCode = function(e){
		var code;
		if (!e) var e = window.event;
		if (e.keyCode) code = e.keyCode;
		return code;
	};
	
};

this.addEvent = function(obj,type,fn){
	if(obj.attachEvent){
		obj['e'+type+fn] = fn;
		obj[type+fn] = function(){obj['e'+type+fn](window.event );}
		obj.attachEvent('on'+type, obj[type+fn]);
	} else {
		obj.addEventListener(type,fn,false);
	};
};
addEvent(window,"load",searchfield);
Veronika_BB вне форума Ответить с цитированием
Старый 14.01.2015, 04:17   #3
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

У вас id одинаковые, поэтому не работает. Автокомплит не работал скорей всего потому, что скрипт был запущен не под сервером, либо не был написан бэкенд, который должен искать города в базе.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 14.01.2015, 07:05   #4
Veronika_BB
Новичок
Джуниор
 
Регистрация: 13.01.2015
Сообщений: 3
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
У вас id одинаковые, поэтому не работает. Автокомплит не работал скорей всего потому, что скрипт был запущен не под сервером, либо не был написан бэкенд, который должен искать города в базе.
Вы сможете мне помочь? Не бесплатно, разумеется. Уже всю голову сломала
Veronika_BB вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Авто изменение размера полей, подчиненной формы в зависимости от длины текста VanDerGraat Microsoft Office Access 1 09.01.2013 01:21
Функция проверки заполнения полей DIMASIKXXX32 Общие вопросы Delphi 3 21.11.2012 00:09
Выделение обязательных для заполнения полей ymnuhj Microsoft Office Excel 1 01.04.2012 18:32
проверка заполнения полей segail HTML и CSS 1 31.01.2012 20:47
Программа для автоматического заполнения полей Маркъ Общие вопросы Delphi 2 23.06.2007 12:38