选择具有多个复选框的元素

Question

Gmail具有以下功能：您可以使用复选框选择标签，它隐藏在div元素中，您可以在其中向上和向下滚动。

它还允许您进行自定义操作，例如在底部创建新标签。

它还允许您使用简单的搜索栏在顶部进行过滤。

实现类似内容的最简单方法是什么，并允许我进行自定义操作，例如底部创建新标签？

在最小的最小值处有一种方法可以在可滚动的div或select元素中显示所有复选框。

更新：

目前，我只有以下复选框

<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