可过滤的多选组合框穿梭/转移小部件

Question

背景

我正在寻找一个基于jQuery或JavaScript的组合框穿梭小部件，允许用户过滤源列表。源列表是组合框（在左侧），目标列表是第二个组合框（在右侧）。

样机

小部件应该类似于：

现有的jQuery widget：

用法

用户可以：

1. 键入正则表达式以过滤源列表（例如，Toy.*）。
   • 窗口小部件隐藏了与过滤器表达式不匹配的所有项目。
2. 在源列表中选择一个或多个项目（使用单击，按住Control键单击和按住Shift键单击选择）。
3. 单击>>将项目从源列表传输到目标列表。
4. 清除过滤器以显示完整的源列表。

技术

理想情况下，组合框将使用多选HTML组合框，标记将是微不足道的：

<select name="sourceList" id="sourceList" size="20" multiple="multiple">
  <option value="1">Toyota</option>
  <option value="2">Mitsubishi</option>
  <option value="3">Nintendo</option>
  <option value="4">Samsung</option>
  <option value="5">Bank of Kyoto</option>
</select>

<select name="destinationList" id="destinationList" size="20" multiple="multiple">
  <option value="6">Mazda</option>
  <option value="7">Fuji</option>
  <option value="8">Honda</option>
</select>

<script>
  $('#sourceList').shuttle();
</script>

调查结果

这些很接近：

• http://archive.plugins.jquery.com/project/crossSelect - 无过滤器
• http://quasipartikel.at/multiselect/ - 不允许多项选择
• http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html - 无过滤器
• http://davidwalsh.name/demo/multi-select.php - 使用MooTools;没有过滤器
• http://devblog.jasonhuck.com/assets/comboselect/ - 无过滤器
• http://www.dhtmlgoodies.com/index.html?whichScript=multiple_select - 无过滤器
• http://blog.cbolson.com/expanding-multiple-select-list-with-search-filter/ - MooTools

这几乎是完美的：

• https://github.com/rabihkodeih/bootstrap-transfer - 使用div代码（而不是<select>）？
• http://www.senamion.com/blog/jmultiselect2side.html - 没有正则表达式搜索
• http://mind2soft.com/labs/jquery/multiselect/ - 没有正则表达式搜索

我正在考虑批量分配3000 - 5000项的类别，并认为这将是实现这一壮举的快捷方式。 （日本公司名称纯属虚构;实际上，名称通常都有一个共同的词或短语。）

问题

什么是满足这些要求的免费开源小部件（jQuery或纯JavaScript）？

相关

相关链接：

• Multiselect two-column transfer widget with Twitter bootstrap theme

Answer 1

一个不错的jquery / bootstrap插件（多选，两个窗格，带正则表达式的过滤器）：

Bootstrap Dual Listbox：http://www.virtuosoft.eu/code/bootstrap-duallistbox/