|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
13.01.2015, 10:21 | #1 |
Новичок
Джуниор
Регистрация: 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, но что-то у меня с ним не сложилось - не срабатывал скрипт. Нашла вот такой вариант в сети: [[смотрите сообщение ниже - не дает объем скрипта]] Этот скрипт работает и подгружает в поле города Вылета. Вопрос: Каким образом можно сделать поиск этих городов и для поля "Город прилета"? |
13.01.2015, 10:22 | #2 |
Новичок
Джуниор
Регистрация: 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); |
14.01.2015, 04:17 | #3 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
У вас id одинаковые, поэтому не работает. Автокомплит не работал скорей всего потому, что скрипт был запущен не под сервером, либо не был написан бэкенд, который должен искать города в базе.
Alar, верни репу!
|
14.01.2015, 07:05 | #4 |
Новичок
Джуниор
Регистрация: 13.01.2015
Сообщений: 3
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Авто изменение размера полей, подчиненной формы в зависимости от длины текста | 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 |