Blog. Just Blog

Скрипт быстрого выбора для элемента SELECT

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Небольшой вспомогательный скрипт на JavaScript, который облегчает работу с выпадающими списками. Суть его в том, что рядом с элементом select создается текстовое поле. При вводе фрагмента строки в это поле, выпадающий список автоматически устанавливается на строку, в которой этот фрагмент найден. Это заметно упрощает работу с формами, где есть длинные выпадающие списки. Форма остается прежней, никаких кастомных модификаций не требуется:
  1. <div>
  2.     <select>
  3.         <option value="">---</option>
  4.         <option value="1">Yellow Banana</option>
  5.         <option value="2">Red Apple</option>
  6.         <option value="3">Green Leaf</option>
  7.         <option value="4">Some strange</option>
  8.     </select>
  9.  
  10.     <input type="text" onkeyup="selecthelper(event);">
  11. </div>
Важно, чтобы вспомогательное поле ввода находилось после выпадающего списка, но обязательно на одном уровне иерархии с ним в DOM-структуре. Вы можете, в случае необходимости, доработать скрипт-обработчик под ваши нужды. Верстка остается валидная, количество выпадающих списков и полей ввода в форме может быть любым.

Теперь сам обработчик. Для упрощения в статье он вызывается из inline-обработчика текстового поля, в реальных проектах обработчики устанавливаются всем элементам по объявленному классу вспомогательных текстовых полей сразу после готовности контента страницы.
  1. function selecthelper(e) {
  2.     var el e.target e.target e.srcElement;
  3.  
  4.     if (el.value!='') {
  5.         // Сформировать регулярку для поиска
  6.         var re = new RegExp(el.value.
  7.             replace(/([-()\[\]{}+?*.$\^|,:#<!\\])/g, '\\$1').
  8.             replace(/\x08/g'\\x08')
  9.         'i');
  10.  
  11.         // Найти первый SELECT, предшествующий полю ввода
  12.         while(true) {
  13.             el=el.previousSibling;
  14.             if (!el) { return; }
  15.             if (el.nodeName.toString().toUpperCase()=='SELECT') {
  16.                 break;
  17.             }
  18.         }
  19.  
  20.         // Найти первый элемент, соответствующий поиску
  21.         var cur=el.selectedIndex;
  22.         for (var i=0i<el.options.lengthi++) {
  23.             if (re.test(el.options[i].text)) {
  24.                 el.selectedIndex=i;
  25.                 if (i!=cur) {
  26.                     // Отправить событие change списку
  27.                     try {
  28.                         // Для современных браузеров
  29.                         var evnt = new Event("change", {bubbles:true,
  30.                             cancelable:true});
  31.                         el.dispatchEvent(evnt);
  32.                     }
  33.                     catch(e) {
  34.                         // Поддержка старых браузеров
  35.                         if (typeof el.onchange=='function') {
  36.                             try {
  37.                                 el.onchange.call(el);
  38.                             }
  39.                             catch(e) {}
  40.                         }
  41.                     }
  42.                 }
  43.                 return;
  44.             }
  45.         }
  46.  
  47.         // Установить поле выбора на самый первый элемент
  48.         el.selectedIndex=0;
  49.     }
  50. }
При выборе элемента списка при помощи скрипта, родительский элемент SELECT не получает об этом никакой информации. Поэтому надо принудительно уведомить его о том, что произошло изменение данных и надо запустить обработчик onchange. А чтобы не дергать обработчик после каждого ввода символа, надо проверять, действительно ли изменился выбранный элемент или он остался на прежнем значении.

Экранирование регулярного выражения позаимствовано из библиотеки Google Closure. Пример работы скрипта вы можете посмотреть на демонстрационной странице. Введите фрагмент любого слова из выпадающего списка и список сразу установится на нужной строке.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 1380 | Комментариев: 4

Метки: JavaScript, HTML
Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
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' ?
Вероятно, связано с кроссбраузерностью?

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2020
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0038 сек.) / Память: 4.75 Mb
Наверх