| |
|
|
| | Все тот же сайт) http://www.pecom.ru/ru/calculator/?type=2&var2=1
Так вышло, что есть список городов, из которых нужно только существующий в базе данных выбрать. Городов 2000 штук.
Просто Select не подходит — это замучаются выбирать, однако функционал нужен отчасти от него.
Суть такова — пользователь начинает вводить нужное ему название города, а ему предлагаются варианты из существующих. Однако должна быть однозначная возможность именно существующего города и получение ID этого города формой — т.е. просто ввести название от балды пользователь не может.
Пока кол-во вписывалось в разумные рамки(порядка 100), вполне подходил
Jquery Flexselect rmm5t.github.com/jquery-flexselect/ работает просто — Select заменяется на Input с предлагаемыми вариантами. если ничего не выбрал — поле сбрасывается.
При 2000 этот способ размеется тормозит.
Каким образом можно иначе сделать?
У меня есть пара мыслей, однако не знаю как их воплотить. И в интернете не могу найти похожие реализации. | |
| |
|
|
| |
|
|
| |
для: Richard Ferlow
(22.06.2009 в 09:42)
| | | Повторяю ещё раз то, что уже писал - вам не нужна "трансформация" инпута в селект.
Селект (вернее - "псевдоселект") со ВСЕМИ вашими двумя тысячами опшенов
должен быть СРАЗУ на странице.
Как только пользователь введёт хоть один символ - "псевдоселект" становится видимым.
По окончании ввода (или при отказе от ввода) "псевдоселект" вновь становится невидимым.
Воспользуйтесь "Поиском файлов и папок" и найдите на жёстком диске вашего компьютера
файлы по маске *.chm.
Просмотрите найденные файлы с целью обнаружения такого, где в левой панели будет
присутствовать закладка "Указатель".
И попробуйте там чего-либо ввести в инпут сверху - и то, что вам будет предложено в списке,
и то, чего в списке нет.
ИМХО, именно такой функционал вам и нужен.
Реализовать его с помощью "чистого" JS - элементарно.
"Копайте" в направлениях:
1. сортировка городов по алфавиту - на сервере.
2. передача списка городов от сервера в браузер в виде трёх строк:
|Абакан|Абакур|Абан... -- города, преобразовываете в массив методом split ()
0,7,14,... -- где числа соответствуют индексам символов | первой строки
value0, value1, value2... -- нужные вам значения для городов
|
3. "псевдоселект" - это <DIV style="width: ЧТО-НАДО; height: ЧТО-НАДО; overflow: auto">,
внутри которого ваши 2000 городов в виде <DIV id="dXXX" style="width: 100%">Город</DIV>,
где XXX - число из второй переданной с сервера строки.
Формируется "псевдоселект" на странице СРАЗУ из данных первой и второй строки с
использованием методов createElement () и appendChild ().
4. отслеживание ввода символов в инпут -- onkeydown или onkeyup
5. определение id выделяемого дива - id = 'd' + ПЕРВАЯ_СТРОКА.indexOf (value_инпута)
6. видимый | невидимый -- style.display = 'block' | 'none'
7. прокрутка "псевдоселекта" до дива с начальными введёнными символами - scrollIntoView ()
8. выделение "опшена" в списке -- style.color, style.backgroundColor, style.border | |
| |
|
|
