Скрипт быстрого выбора для элемента SELECT
Code (HTML) : Убрать нумерацию
- <div>
- <select>
- <option value="">---</option>
- <option value="1">Yellow Banana</option>
- <option value="2">Red Apple</option>
- <option value="3">Green Leaf</option>
- <option value="4">Some strange</option>
- </select>
- <input type="text" onkeyup="selecthelper(event);">
- </div>
Теперь сам обработчик. Для упрощения в статье он вызывается из inline-обработчика текстового поля, в реальных проектах обработчики устанавливаются всем элементам по объявленному классу вспомогательных текстовых полей сразу после готовности контента страницы.
Code (JavaScript) : Убрать нумерацию
- function selecthelper(e) {
- var el = e.target ? e.target : e.srcElement;
- if (el.value!='') {
- // Сформировать регулярку для поиска
- var re = new RegExp(el.value.
- replace(/([-()\[\]{}+?*.$\^|,:#<!\\])/g, '\\$1').
- replace(/\x08/g, '\\x08')
- , 'i');
- // Найти первый SELECT, предшествующий полю ввода
- while(true) {
- el=el.previousSibling;
- if (!el) { return; }
- if (el.nodeName.toString().toUpperCase()=='SELECT') {
- break;
- }
- }
- // Найти первый элемент, соответствующий поиску
- var cur=el.selectedIndex;
- for (var i=0; i<el.options.length; i++) {
- if (!el.options[i].disabled && re.test(el.options[i].text)) {
- el.selectedIndex=i;
- if (i!=cur) {
- // Отправить событие change списку
- try {
- // Для современных браузеров
- var evnt = new Event("change", {bubbles:true,
- cancelable:true});
- el.dispatchEvent(evnt);
- }
- catch(e) {
- // Поддержка старых браузеров
- if (typeof el.onchange=='function') {
- try {
- el.onchange.call(el);
- }
- catch(e) {}
- }
- }
- }
- return;
- }
- }
- // Установить поле выбора на самый первый элемент
- el.selectedIndex=0;
- }
- }
Экранирование регулярного выражения позаимствовано из библиотеки Google Closure. Пример работы скрипта вы можете посмотреть на демонстрационной странице. Введите фрагмент любого слова из выпадающего списка и список сразу установится на нужной строке.
Просмотров: 2619 | Комментариев: 5
Метки: JavaScript, HTML
Внимание! Статья опубликована больше года назад, информация могла устареть!
Комментарии
Отзывы посетителей сайта о статье
ManHunter
(14.01.2021 в 11:10):
Добавил обработку строк с атрибутом disabled="true", такие строки теперь выпадают из обработки, так как их обычным способом тоже не выбрать. Скрипт в статье и демонстрашке обновлен.
ManHunter
(15.09.2020 в 09:55):
Добавил уведомление о событии change, скрипт в статье обновлен.
Игорь
(21.09.2017 в 10:24):
О, не знал. Очень полезная инфа, спасибо, буду использовать.
ManHunter
(21.09.2017 в 10:09):
Именно так. Некоторые браузеры возвращают имя ноды в нижнем регистре, некоторые в верхнем. Чтобы не было разногласий, строка принудительно приводится к единообразному виду.
Игорь
(21.09.2017 в 10:06):
Прокомментируйте, пожалуйста, строку el.nodeName.toString().toUpperCase()=='SELECT'
Для чего использованы операции .toString().toUpperCase() ?
Т.е., в каких случаях el.nodeName вернет нет 'SELECT' ?
Вероятно, связано с кроссбраузерностью?
Для чего использованы операции .toString().toUpperCase() ?
Т.е., в каких случаях el.nodeName вернет нет 'SELECT' ?
Вероятно, связано с кроссбраузерностью?
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 35,184 раза
Поблагодарили 35,184 раза
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 360 |
 |
 |