Cоздание раскрывающегося списка с удобным поиском

coollistСегодня с помощью известного уже нам jQuery будет создавать необычный, но очень удобный вариант раскрывающегося списка с буквенным указателем. Как обычно для начала демострируем пример это списка, а предоставляем все исходники для наших начинающих веб программистов. Это будет очень полезно, если у Вас большой список и пользователю трудно найти необходимое значение. Рядом с этими значениями находится список букв, который существенно облегчает поиск нужного элемента. И так начнем, все очень проста реализуется…

В самом начале документа подключаем фреймворк, таблицу стилей и вспомогательный скрипт:
[source]


[/source]
И далее создаем обычное поле с выпадающими значениями с помощью тега <select>. Но при этом придаем ему id=»demo». Получится вот это:
[source]

[/source]
На этом всё, как и было сказано все достаточно просто. Можно работать как с русскими, так  и английскими данными в списках. Ссылки на реализованый пример и исходники указаны в начале поста 🙂