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

Question

关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。












我们不允许提出有关书籍、工具、软件库等建议的问题。您可以编辑问题，以便可以用事实和引用来回答它。


7年前关闭。







Improve this question




背景

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

小样

小部件应类似于:



现有的 jQuery widget :



用法

用户可以:

键入正则表达式以过滤源列表(例如 Toy.* )。

小部件隐藏所有与过滤器表达式不匹配的项目。

在源列表中选择一个或多个项目(使用单击、控制单击和 shift 单击选择)。

点击>>将项目从源列表传输到目标列表。

清除过滤器以显示完整的源列表。

技术的

理想情况下，组合框将使用多选 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 插件(多选，两个 Pane ，使用正则表达式过滤):

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