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

标签 javascript jquery combobox filter widget

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












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


7年前关闭。







Improve this question




背景

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

小样

小部件应类似于:

mockup

现有的 jQuery widget :

Bootstrap Transfer

用法

用户可以:

  • 键入正则表达式以过滤源列表(例如 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
  • 最佳答案

    一个不错的 jquery/bootstrap 插件(多选,两个 Pane ,使用正则表达式过滤):

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

    关于javascript - 可过滤的多选组合框穿梭/转移小部件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13366940/

    相关文章:

    javascript - 如何使一个div可以拖动到另一个div上?

    javascript - 如何将多项选择中选定的元素插入到输入中?

    jquery - 如何使用 jQuery 访问 API

    javascript - jQuery 中的这个选择器语法发生了什么变化?

    javascript - Angular ng-click 用于 drodpdown 选项标签

    javascript - Range.compareBoundaryPoints() 产生奇怪的结果

    javascript - 使用 localstorage 从 onclick 函数保存和检索用户布局首选项

    c# - 自动完成:用 json 数据显示结果

    c# - 更改 WinForms ComboBox 的选择颜色

    javascript - 获取ExtJS中数据存储的某个值