Поиск по алфавиту в выпадающем списке

Нужен пример кода.
Нужно нечто похожее на выпадающий список. То есть текстовое окно + раскрывающийся список. К примеру список городов.
Если пользователь вводит в текстовое окно скажем "Ад", то появляется паскрывающийся список и в нем высвечивается "Адлер", "Адис-Абеба", и т.д.
Чем больше букв вводит пользователь, тем точнее выбор.
Затем пользователь может щелкнуть мышкой на выбранном городе в раскрывающемся списке. При этом:
список закрывается
в окне вводится полное название выбранного города
В переменную записывается код выбранного города.
При этом пользователь не должен ощущать никаких временных задержек.

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

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

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

evgenybe (05.03.2007) Конечно первое. Чтобы указатель перемещался на первое подходящее слово. А по поводу самой темы - я ее уже в четвертый или в пятый раз поднимаю, и ни разу ответа не получил.

А чем не устраивает последний ответ данный <A class=SmlBoldLinks id=ctl03_ctlTopic_ctlPanelBar_ctlTopicsR epeater_ctl24_smAuthorName onmouseover="window.status = window.location;return true;" title="View Владимир_М's Profile..." onmouseout="window.status=''return true;" href="javascript:void(''); Владимир_М в вами созданной теме: http://www.relib.com/forums/Topic907001-10-1.aspx http://www.relib.com/forums/Topic907001-10-1.aspx
Тот код и являеться решением проблемы...

0

Vizlim (05.03.2007) evgenybe (05.03.2007) Конечно первое. Чтобы указатель перемещался на первое подходящее слово. А чем не устраивает последний ответ данный <A class=SmlBoldLinks id=ctl03_ctlTopic_ctlPanelBar_ctlTopicsR epeater_ctl24_smAuthorName onmouseover="window.status = window.location;return true;" title="View Владимир_М's Profile..." onmouseout="window.status=''return true;" href="javascript:void(''); Владимир_М в вами созданной теме: http://www.relib.com/forums/Topic907001-10-1.aspx http://www.relib.com/forums/Topic907001-10-1.aspx Тот код и являеться решением проблемы...

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

evgenybe (06.03.2007) Если честно, то я в том коде абсолютно не разобрался. Куда там надо загружать список слов? а откуда выбирать числовые значения слова выбранного пользователем? К нему бы ну хоть какие-то пояснения. Может кто-то возьмется за это?

Ну, попытаюсь объяснить...
работает скрипт точно под IE 6... При запуске скрипта надо нажать на одну из ячеек select'a, а точнее где значение ---. Далее в текстовом поле введём символ например: <STRONG>н </STRONG>. в селекте будет выбран автоматически поле <STRONG>наташа</STRONG>, и в текстовом поле будет тоже отображено слово <STRONG>н</STRONG>аташа.
Список слов - это слова находящиеся между <option value="0 и </option> (например: вася, петя, толики, --- и т.д.)
Числовые значеня... <option <STRONG>value</STRONG>="<FONT color=#ff1111>0
Вместо <FONT color=#ff1111>0 <FONT color=#1f5080>ставим любое число например id в БД...

0

Да я не это спрашиваю. Что такое SELECT и как он работает, слава богу, не секрет. Секрет в том что делает, для чего предназначена каждая из функций коих тут, по-моему 4.

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").option s;
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="";
&n

0

Спасибо! Премного благодарен!
Сегодня я проработаю и немного изменю и упрощу то, что в этих фунциях написано. Результат покажу.