Фильтрация длинных списков select

Частенько возникает необходимость сделать большой список рубрик на сайте или в административной части, но такой список не удобен для поиска в нем нужных рубрик, он просто получается километровым. Сегодня я расскажу как сделать список с фильтром, для административной части сайта, к сожалению моя обертка для <select> списка не очень кроссбраузерна и не понятна для не подготовленного пользователя, поэтому обертку эффективно можно применять только в административной части сайта, к слову сказать в моей Dashed CMS применяется эта обертка для списков.

Сейчас опишу как работает мой фильтр списков.

1. Стандартный <select> не заменяется другими элементами, поэтому очень просто интегрируется под любые нужды, и в случае ошибки в javascript сам контрол не перестает работать

2. При наведении курсора мыши <select> захватывает фокус

3. После того как фокус захвачен можно нажать любую клавишу и появится поле фильтра и перехватит фокус на себя, теперь можно вводить интересующий текст и по нему будет фильтроваться <select>

4. Фильтрация происходит с игнорированием регистра и по полному вхождению слова в строке а не по первым символам, если вам надо по первому символу то можно заменить строку var reg = new RegExp (str,"gim"); на var reg = new RegExp ('^'+str,"gim");

5. При активации фильтра список расскрывается и не закроется пока не щелкнуть на нем нужный пункт мышкой или не отменить фильтрацию

6. Для данной обертки характерно не очень кроссбраузерное поведение, например в Fire Fox удалось добиться скрытия не подподающих под фильтр <options>, а в других браузерах удалось лишь сделать их не активными, также во всех браузерах отменить фильтрацию можно клавишей Esc, тогда как Opera по какойто причине воспротивилась этому

7. Для раскрытия списка используется его свойство size, что не является правильным, но к сожалению по причине безопасности во всех браузерах нет эмуляции раскрытия списка, данная особенность налагает много проблем с настройкой стилей для блока контейнера и самого <select> , в общем вам придется подстраивать стили так чтобы список не раздвигал страницу

В общем моя обертка не является полным решением проблемы длинных списков, но для установки в админку требующую такой функционал можно использовать, ведь администратор скорее всего будет использовать тот браузер, который ему посоветуют для работы с этой админкой.

Посмотреть пример списка и его исходник можно тут

Рейтинг $r-- [1] $r++