Поиск по алфавиту в выпадающем списке.
Релиб
Форумы       Участники    Календарь    Кто он-лайн?
Добро пожаловать, гость ( Вход | Регистрация )
        



Поиск по алфавиту в выпадающем списке. Expand / Collapse
Автор
Сообщение
04.03.2007 11:04
Supreme Being

Supreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme Being

участник
Last Login: 19.10.2008 12:14
Сообщ.: 693, Visits: 7 081
Нужен пример кода.

Нужно нечто похожее на выпадающий список. То есть текстовое окно + раскрывающийся список. К примеру список городов.

Если пользователь вводит в текстовое окно скажем "Ад", то появляется паскрывающийся список и в нем высвечивается "Адлер", "Адис-Абеба", и т.д. 
Чем больше букв вводит пользователь, тем точнее выбор.

Затем пользователь может щелкнуть мышкой на выбранном городе в раскрывающемся списке. При этом:

список закрывается
в окне вводится полное название выбранного города
В переменную записывается код выбранного города.

При этом пользователь не должен ощущать никаких временных задержек.

Спасибо!
Евгений Боуден

Сообщ. #911240
05.03.2007 16:48
Supreme Being

Supreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme Being

участник
Last Login: 25.04.2007 11:57
Сообщ.: 77, Visits: 97
Не совсем ясно, надо чтобы при введении букв  фокус перемещался в списке туда где начинаются эти буквы в выпадающем меню, или именно чтобы выпадающее меню включало только те елементы которые подходят под критерий?

Первое реализовать легче, второе сложнее и задержки при больших объемах информации скорее всего будут. Тут есть гдето тема где это обсуждается, я ее хорошо помню, тоже выпадающий список человек делал, и примеров там хватало.

 

ЗЫ: А, ну да
http://www.relib.com/forums/Topic907001-10-1.aspx
это твоя тема :)

Сообщ. #911254
05.03.2007 17:32
Supreme Being

Supreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme Being

участник
Last Login: 19.10.2008 12:14
Сообщ.: 693, Visits: 7 081
Конечно первое. Чтобы указатель перемещался на первое подходящее слово.

А по поводу самой темы - я ее уже в четвертый или в пятый раз поднимаю, и ни разу ответа не получил.

Спасибо!
Евгений Боуден

Сообщ. #911255
05.03.2007 19:31
Supreme Being

Supreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme Being

участник
Last Login: 29.05.2008 20:04
Сообщ.: 269, Visits: 2 381
evgenybe (05.03.2007)
Конечно первое. Чтобы указатель перемещался на первое подходящее слово.

А по поводу самой темы - я ее уже в четвертый или в пятый раз поднимаю, и ни разу ответа не получил.

А чем не устраивает последний ответ данный Владимир_М в вами созданной теме: http://www.relib.com/forums/Topic907001-10-1.aspx

Тот код и являеться решением проблемы...

----------------------------------
Я безработный...
Возьмите меня на работу. =)

Сообщ. #911265
06.03.2007 14:04
Supreme Being

Supreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme Being

участник
Last Login: 19.10.2008 12:14
Сообщ.: 693, Visits: 7 081
Vizlim (05.03.2007)
evgenybe (05.03.2007)
Конечно первое. Чтобы указатель перемещался на первое подходящее слово.

А чем не устраивает последний ответ данный Владимир_М в вами созданной теме: http://www.relib.com/forums/Topic907001-10-1.aspx

Тот код и являеться решением проблемы...

Если честно, то я в том коде абсолютно не разобрался. Куда там надо загружать список слов? а откуда выбирать числовые значения слова выбранного пользователем?

К нему бы ну хоть какие-то пояснения.

Может кто-то возьмется за это?

Спасибо!
Евгений Боуден

Сообщ. #911299
06.03.2007 18:01
Supreme Being

Supreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme Being

участник
Last Login: 29.05.2008 20:04
Сообщ.: 269, Visits: 2 381
evgenybe (06.03.2007)
Если честно, то я в том коде абсолютно не разобрался. Куда там надо загружать список слов? а откуда выбирать числовые значения слова выбранного пользователем?

К нему бы ну хоть какие-то пояснения.

Может кто-то возьмется за это?

Ну, попытаюсь объяснить...

работает скрипт точно под IE 6... При запуске скрипта надо нажать на одну из ячеек select'a, а точнее где значение ---. Далее в текстовом поле введём символ например: н . в селекте будет выбран автоматически поле наташа, и в текстовом поле будет тоже отображено слово наташа.

Список слов - это слова находящиеся между <option value="0"> и </option> (например: вася, петя, толики, --- и т.д.) 

Числовые значеня... <option value="0">

Вместо 0 ставим любое число например id в БД...

----------------------------------
Я безработный...
Возьмите меня на работу. =)

Сообщ. #911308
06.03.2007 21:25
Supreme Being

Supreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme Being

участник
Last Login: 19.10.2008 12:14
Сообщ.: 693, Visits: 7 081
Да я не это спрашиваю. Что такое SELECT и как он работает, слава богу, не секрет. Секрет в том что делает, для чего предназначена каждая из функций коих тут, по-моему 4.

Спасибо!
Евгений Боуден
Сообщ. #911311
06.03.2007 23:40
Supreme Being

Supreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme BeingSupreme Being

участник
Last Login: 29.05.2008 20:04
Сообщ.: 269, Visits: 2 381
evgenybe (06.03.2007)
Да я не это спрашиваю. Что такое SELECT и как он работает, слава богу, не секрет. Секрет в том что делает, для чего предназначена каждая из функций коих тут, по-моему 4.

<form class="inc" onsubmit="mu_paste(this.form)">
<div id="info" style="display: none; width: 200px; height: 30px; position: absolute;"></div>
<INPUT  TYPE="text" NAME="name"  id="mu_text" VALUE="" step=0 onkeypress="find_mi(event,this)">
</form>
Скажем, на странице есть
<SELECT name="lst" size="4" id="lst">
<option value="0">---</option>
<option value="0">толики</option>
<option value="1">вася</option>
<option value="0">петя</option>
<option value="0">петруша</option>
<option value="0">петя-сан</option>
<option value="0">толиков</option>
<option value="0">петя-сана</option>
<option value="0">толиковна</option>
<option value="0">наташа</option>
</Select>


<SCRIPT LANGUAGE="JavaScript">
<!--
var find_=[];
var rr=document.getElementById("lst").options;
for(i=0;i<rr.length;i++){  //Перебирает элементы в select'e
find_[i]=rr[i].text;//переписывает элементы в новый массив
}
var n_find="";
var n_evt="";
var k=0;  //Позиция для step
var obj=document.getElementById("info");  //ссылаеться на невидимый div id="info"
var obj_txt=document.getElementById("mu_text");  //ссылаеться на TYPE="text" NAME="name"

function mu_pole(x_text,it){  //Выделяет элемент в select'e
var objRange = document.selection.createRange();
obj.style.top = objRange.offsetTop+15;
obj.style.left = objRange.offsetLeft+20;
obj.innerHTML = x_text.slice(obj_txt.step); //отображает искомый элемент чуть ниже остальных...
obj.style.display = "block";   //Делает невидимый div id="info" видимым
rr[it].selected=true;// Выделяет найденный элемент
}

function hide_mu_pole(it){ //Скрывает/Обнуляет найденное
obj.innerHTML = "";   //Обнуляет значение div id="info"
obj.style.display = "none";  //Делает div id="info" невидимым
if(it){  //если послынное значение "существует"
rr[0].selected=true; //Выделяет самый первый элемент в select'e
}
}

function mu_paste(ent_){  //Если найденное значение устраивает, то в TYPE="text" NAME="name" переписывает значение options[i]
if(obj.innerHTML!=""){  //Если значение div id="info" содержит символы
obj_txt.value+=obj.innerHTML; //Переписывает значение div'a в TYPE="text" NAME="name"
obj.innerHTML = "";  //Обнуляет значение div id="info"
hide_mu_pole();  //Посылает "несуществующее" значение в эту функцию
event.returnValue=false;
}
event.returnValue=false;
}

function find_mi(f_evt,x){  //нажатие на клавиатуру в  TYPE="text" NAME="name", ПОИСК
 var poz_=x.step;  //Определяет позицию (изначально step=0)
 if(f_evt.keyCode==8){  //Нажатие на Backspase
 obj_txt.step=100;  //Устанавливает позицию step=100
    if(obj.style.display =="block"){ //Если div видим
 hide_mu_pole();  //Посылает "несуществующее" значение в эту функцию
 event.returnValue=true;
 return;  //Прекращает выполнение этой функции
 }
 event.returnValue=true;
 return;  //Прекращает выполнение этой функции
 }
 if(f_evt.keyCode==32){  //Нажатие на Пробел
   n_evt="";
   k=0; //Позиция для step
   x.step=0;  //Устанавливает позицию step=0
   n_find="";
   if(obj.style.display =="block"){ //Если div видим
    hide_mu_pole(); //Посылает "несуществующее" значение в эту функцию
 return;  //Прекращает выполнение этой функции
   }
   return;  //Прекращает выполнение этой функции
 }
 if(f_evt.keyCode==13){ //Нажатие на Enter
 x.step=k;  //step=k, смещение текста по оси Х в TYPE="text" NAME="name"
 return;  //Прекращает выполнение этой функции
 } 
for(var i=0;i<find_.length;i++){  //цикл по поиску в select'e
  if(find_[i].length>k){  //Если введено символов для поиска не больше слова в options[i]
    for(j=0;j<=k;j++){  //Перебирает значение до введённого последнего символа в TYPE="text" NAME="name"
   n_find+=find_[i].charCodeAt(j);  //Записывает все коды символы options[i], до кол-во введённых символов
   }
  }
 
alert("n_find="+n_find+" n_evt="+n_evt+" f_evt.keyCode="+f_evt.keyCode)  //Для примера
 
  if(n_find==(n_evt+""+f_evt.keyCode)&&poz_==k) { //Проверяет есть или нет искомого, если есть
  n_evt+=f_evt.keyCode;
  n_find="";
  k++; //Увеличивает step на 1
  x.step=k;
  mu_pole(find_[i],i); //Выделяет элемент
  event.returnValue=true;
  break; //прекращает выполнение цикла
  }
  else {  //Искомое не найд