问题

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).

Mockup

The widget should resemble:

An existing jQuery widget:

Usage

The user can:

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

Technical

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

<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

These are nearly perfect:

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

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.)

Question

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

回答1:

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

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

来源：https://stackoverflow.com/questions/13366940/filterable-multi-select-combobox-shuttle-transfer-widget

标签

javascript

jquery

combobox

filter

widget

Filterable multi-select combobox shuttle/transfer widget [closed]

问题