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

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

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


<script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script src="indexed.select.jquery.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
	$(document).ready(function(){
		$('#').indexedselect({defaultText:'Выберите область...'});
	});
// ]]></script>

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


<select id="demo" style="font-size: 150%"><option value="90">Адыгея</option><option value="91">Алтайский край</option><option value="92">Амурская область</option></select>

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

  • Poollinkka

    Подписался на RSS, буду следить =)

  • Sashuulllkaa

    Ух ты, мне понравилось!

  • Roland

    А почему скрипт не работает если поменять в файле

    indexed.select.jquery.js расфирения html на php.

    Хотел подключить селект из базы и ничего не работает. В чем проблема?

Запись навигация

Top