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:

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.

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?

Related

Related links:

• Multiselect two-column transfer widget with Twitter bootstrap theme