HTML+CSS+JavaScript

Столкнулся с такой сложной для меня задачей.
Помогите, пожалуйста, кто сталкивался с подобным или имеет большой опыт в программировании на JS.

Есть некоторый динамически формирующийся элемент SELECT. Свое содержимое он берет в связной таблице БД. Предположим, что в некоторый момент элементов списка SELECT стало чрезмерно много, так что выбор элемента стал не удобен. Возникает необходимость сузить существующий огромный список элементов. Это можно сделать , например, осуществив фильтрацию элементов по названию. Т.е. я хочу получить такой список SELECT в котором можно до нажатия стрелочки выбора ввести пару символов, в результате чего в списке будут содержаться только элементы, имеющие в названии такой же порядок символов, что я и ввел.

Встречал подобное в Delphi и C-Builder, а как осуществить в JS не имею представления ввиду отсутствия опыта программирования на этом языке.

Привожу код, где хотелось бы получить подобную функцию:

<?php include ("menu_top.php"); ?> <div align="center" class="StyleForHeader"> <p> <br> </p> <p> Добавление нового пользователя оборудования </p> </div>       <form action="/users_insert.php" method="post" name="form"> <table width="100%" border="0" cellspacing="0" cellpadding="0">   <tr>     <td width="11%" align="left" valign="baseline">&nbsp;</td>     <td width="32%" align="left" valign="baseline">Ф.И.О. пользователя оборудования</td>     <td width="32%" align="left" valign="baseline"><input name="fio_user" type="text" size="50" maxlength="50" /></td>     <td width="25%" align="left" valign="baseline">&nbsp;</td>   </tr>   <tr>     <td align="left" valign="baseline">&nbsp;</td>     <td align="left" valign="baseline">&nbsp;</td>     <td align="left" valign="baseline">&nbsp;</td>     <td align="left" valign="baseline">&nbsp;</td>   </tr>   <tr>     <td align="left" valign="baseline">&nbsp;</td>     <td align="left" valign="top">Контактная информация пользователя оборудования</td>     <td align="left" valign="baseline"><textarea name="contact" cols="50" rows="5"></textarea></td>     <td align="left" valign="baseline">&nbsp;</td>   </tr>   <tr>     <td align="left" valign="baseline">&nbsp;</td>     <td align="left" valign="baseline">&nbsp;</td>     <td align="left" valign="baseline">&nbsp;</td>     <td align="left" valign="baseline">&nbsp;</td>   </tr>   <tr>     <td align="left" valign="baseline">&nbsp;</td>     <td align="left" valign="baseline">Организация пользователя оборудования</td>     <td align="left" valign="baseline"><select name="id_org">       <?php     // Соединение с базой даных     //  Здесь нужно сократить количество элементов по первоначальным символам     require_once ("config.php");          $sql = "SELECT * FROM orgs";     $res =  mysql_query($sql, $dbcon);          if(!$res) exit("Error in $sql : ". mysql_error());     while( $row = mysql_fetch_assoc($res) )     echo "<option value =\"$row[id_org]\">".htmlspecialchars($row['name_org'])."</option>\r\n";     ?>     </select></td>     <td align="left" valign="baseline">&nbsp;</td>   </tr>   <tr>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>   </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0">   <tr>     <td width="38%" align="center" valign="baseline">&nbsp;</td>     <td width="24%" align="center" valign="baseline">&nbsp;</td>     <td width="38%" align="center" valign="baseline">&nbsp;</td>   </tr>   <tr>     <td align="center" valign="baseline">&nbsp;</td>     <td align="center" valign="baseline"><input name="submit" type="submit" value="Добавить пользователя" /></td>     <td align="center" valign="baseline">&nbsp;</td>   </tr> </table> </form>

>хочу получить такой список SELECT в котором можно до нажатия стрелочки выбора ввести пару символов, в результате чего в списке будут содержаться только элементы, имеющие в названии такой же порядок символов, что я и ввел

Такого списка SELECT вы никогда не получите - стандартная реализация SELECT'a таких изысков не содержит в принципе.
Значит, вам надо отказаться от SELECT'a вовсе и конструировать свой собственный элемент интерфейса
И это совсем не сложно.

Зачем отказываться от SELECT'a. На лету отбираем из общего массива, то, что нужно на текущий момент, и генерим новый SELECT. Только надо не забыть, что ширина SELECT'a БУДЕТ изменяться по самому длинному элементу. Пришлось с этим воевать. Зачем, и так понятно.

"И это совсем не сложно." - Согласен.

>Зачем отказываться от SELECT'a

Затем, что в природе ОТСУТСТВУЕТ "SELECT в котором можно до нажатия стрелочки выбора ввести пару символов"


>Пришлось с этим воевать

Надеюсь, вы таки победили? И у вас сегодня свой ДЕНЬ ПОБЕДЫ?

PAT прекрати мне выкать. Нет, я понимаю, если ты воспитатель в детском садике, то выканье в крови сидит. Тогда, понимаю, тебе трудно.

Не понял про стрелочку, это про какую речь?

В прошлом году написал для жены программу по цветочкам, там два селекта, в одном уже 700 названий перевалило, во втором за 200. Оба генерятся на старте, и после очередного добавления сортируются и генерятся по новой.
Очень похоже на то, что просит romu4-

Твой юмор я оценил, спасибо, было очень весело, можешь продолжать, в долгу постараюсь не остаться.

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

Напиши мне, подумаем.

"Полковнику никто не пишет,
Полковника никто не ждёт..." (с)БИ2


romu4- , найдите поиском на своём компьютере любой файл типа *.CHM - они там есть в большом количестве в разных папках, особливо на корневом диске - в папках Windows, и в Program Files

Запустите такой файл и кликните слева вверху на "Указатель".
Когда вверху в текстовое поле вводите один-два-три... символа, то список ниже скроллится и на самом верху оказывается та строка, начало которой совпадает с введёнными символами. И далее кликаете по уже нужной вам строке - она и выбирается (и показывается, если кликнуть дважды, или нажать на энтер, или нажать на кнопку "Показать").

Где-то такой интерфейс вам и нужен.
Реализуется он довольно просто:
1. создаёте DIV с определённой шириной/высотой и с overflow: scroll
2. внутрь него засовываете одноколоночную таблицу
3. в строки таблицы помещаете по одной ячейке, а в них - отсортированные по алфавиту текстовые значения своих опшенов.
Сортировать только надо не обычным (пустым) методом sort (), который сначала ставит цифры, потом ПРОПИСНЫЕ буквы от A до Z, и только потом - строчные (от a до z). Надо это сделать регистронезависимым способом (если не сумеете - свистните, помогу).
4. ну а потом - при появлении фокуса в текстовом поле включаете по тайм-ауту проверку ввода в это текстовое поле символов и ищете первое же совпадение в любом регистре (отключая тайм-аут при потере фокуса текстовым полем). И, разумеется, используете метод scrollIntoView (true) к строке, где обнаружилось совпадение.

В общем, всё просто.
Если с чем не справитесь - свистИте здесь.

Можно, конечно, использовать и SELECT.
Но только ТЕОРЕТИЧЕСКИ.
Процесс удаления ненужных и создания нужных опшенов "на лету" - он НА ПРАКТИКЕ очень тормозной. При малом тайм-ауте процессор "захлебнётся" (стек переполнится), делая это. А при большом тайм-ауте рискуете получить совсем не тот набор опшенов, который вам нужен.

ok!
Спасибо за идею и советы, я попробую это сделать!