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.         for (var i=0i<el.options.lengthi++) {
  22.             if (re.test(el.options[i].text)) {
  23.                 // Установить поле выбора на найденный элемент
  24.                 el.selectedIndex=i;
  25.                 return;
  26.             }
  27.         }
  28.  
  29.         // Установить поле выбора на самый первый элемент
  30.         el.selectedIndex=0;
  31.     }
  32. }
Экранирование регулярного выражения позаимствовано из библиотеки Google Closure. Пример работы скрипта вы можете посмотреть на демонстрационной странице. Введите фрагмент любого слова из выпадающего списка и список сразу установится на нужной строке.

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

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

Комментарии

Отзывы посетителей сайта о статье
Игорь (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-2018
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0032 сек.) / Память: 4.75 Mb
Наверх