выбрать элемент с несколькими флажками

Question

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

Он также позволяет настраивать действия, такие как создание новой метки внизу.

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

Каков самый простой способ реализовать что-то подобное и разрешить мне создавать настраиваемые действия, такие как Создать новую метку внизу?

На минимальном минимальном уровне есть способ отображения всех флажков в прокручиваемом элементе div или select.

UPDATE:

В настоящее время у меня есть только следующие галочки

<div class="input select"> 
    <label for="SiteSite">Sites</label> 
    <input type="hidden" name="data[Site][Site]" value="" id="SiteSite"> 

<div class="checkbox"><input type="checkbox" name="data[Site][Site][]" value="1" id="SiteSite1"><label for="SiteSite1">ODSite:P11379-440YishunAve11 HWSW_ESTA ENO21.000070.10001 92640145</label></div> 
<div class="checkbox"><input type="checkbox" name="data[Site][Site][]" value="2" id="SiteSite2"><label for="SiteSite2">ODSite:P11374-SGRecClub HWSW_ESTA ENO21.000070.10002 92640147</label></div> 

</div> 

Answer 1

Вы можете использовать плагин под названием Select2, который имеет все варианты, которые вы ожидаете от <SELECT> тега.

http://img594.imageshack.us/img594/543/select2.png