javascript 可过滤的多选组合框穿梭/传输小部件

Filterable multi-select combobox shuttle/transfer widget

提问by Dave Jarvis

Background

背景

I am looking for a jQuery- or JavaScript-based combobox shuttle widget that allows the user to filter the source list. The source list is a combobox (on the left) and the destination list is a second combobox (on the right).

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

Mockup

小样

The widget should resemble:

小部件应该类似于：

An existing jQuery widget:

一个现有的 jQuery小部件：

Usage

用法

The user can:

用户可以：

1. Type a regex to filter the source list (e.g., Toy.*).
   • The widget hides all items that do not match the filter expression.
2. Select one or more items in the source list (using click, control-click, and shift-click selections).
3. Click the >>to transfer the items from the source list to the destination list.
4. Clear the filter to reveal the full source list.

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

Technical

技术的

Ideally, the comboboxes would use a multiselect HTML combobox and the markup would be trivial:

理想情况下，组合框将使用多选 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>

Findings

发现

These are close:

这些很接近：

• http://archive.plugins.jquery.com/project/crossSelect- no filter
• http://quasipartikel.at/multiselect/- does not allow multiple selections
• http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html- no filter
• http://davidwalsh.name/demo/multi-select.php- uses MooTools; no filter
• http://devblog.jasonhuck.com/assets/comboselect/- no filter
• http://www.dhtmlgoodies.com/index.html?whichScript=multiple_select- no filter
• http://blog.cbolson.com/expanding-multiple-select-list-with-search-filter/- MooTools

• 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

These are nearly perfect:

这些几乎是完美的：

• https://github.com/rabihkodeih/bootstrap-transfer- uses divtags (instead of <select>)?
• http://www.senamion.com/blog/jmultiselect2side.html- No regex search
• http://mind2soft.com/labs/jquery/multiselect/- No regex search

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

I'm looking to batch up the assignment of categories for 3000 - 5000 items and thought this would be a quick way to accomplish such a feat. (The Japanese company names are purely fictional; in reality, the names will typically have a word or phrase in common.)

我希望为 3000 - 5000 个项目批量分配类别，并认为这将是完成这样一项壮举的快速方法。（日本公司名称纯属虚构；实际上，这些名称通常有一个共同的词或短语。）

Question

问题

What is a free and open source widget (jQuery or pure JavaScript) that meets these requirements?

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

Related

有关的

Related links:

相关链接：

• Multiselect two-column transfer widget with Twitter bootstrap theme

• 带有 Twitter 引导程序主题的多选两列传输小部件

采纳答案by Taha Jahangir

A nice jquery/bootstrap plugin (multiple select, two pane, filter with regex):

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

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

Bootstrap 双列表框：http: //www.virtuosoft.eu/code/bootstrap-duallistbox/