title: Filterable multi-select combobox shuttle/transfer widget
body: <h1>Background</h1>
  
  <p>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).</p>
  
  <h1>Mockup</h1>
  
  <p>The widget should resemble:</p>
  
  
  
  <p><img src="https://i.stack.imgur.com/Lm3rz.png" alt="mockup"></p>
  
  
  
  <p>An existing jQuery <a href="https://github.com/rabihkodeih/bootstrap-transfer" rel="nofollow noreferrer">widget</a>:</p>
  
  <p><img src="https://i.stack.imgur.com/ULo8q.png" alt="Bootstrap Transfer"></p>
  
  <h1>Usage</h1>
  
  <p>The user can:</p>
  
  <ol>
  <li>Type a regex to filter the source list (e.g., <code>Toy.*</code>).
  
  <ul>
  <li>The widget hides all items that do not match the filter expression.</li>
  </ul></li>
  <li>Select one or more items in the source list (using click, control-click, and shift-click selections).</li>
  <li>Click the <code>&gt;&gt;</code> to transfer the items from the source list to the destination list.</li>
  <li>Clear the filter to reveal the full source list.</li>
  </ol>
  
  <h1>Technical</h1>
  
  <p>Ideally, the comboboxes would use a multiselect HTML combobox and the markup would be trivial:</p>
  
  <pre><code>&lt;select name="sourceList" id="sourceList" size="20" multiple="multiple"&gt;
    &lt;option value="1"&gt;Toyota&lt;/option&gt;
    &lt;option value="2"&gt;Mitsubishi&lt;/option&gt;
    &lt;option value="3"&gt;Nintendo&lt;/option&gt;
    &lt;option value="4"&gt;Samsung&lt;/option&gt;
    &lt;option value="5"&gt;Bank of Kyoto&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select name="destinationList" id="destinationList" size="20" multiple="multiple"&gt;
    &lt;option value="6"&gt;Mazda&lt;/option&gt;
    &lt;option value="7"&gt;Fuji&lt;/option&gt;
    &lt;option value="8"&gt;Honda&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;script&gt;
    $('#sourceList').shuttle();
  &lt;/script&gt;
  </code></pre>
  
  <h1>Findings</h1>
  
  <p>These are close:</p>
  
  <ul>
  <li><a href="http://archive.plugins.jquery.com/project/crossSelect" rel="nofollow noreferrer">http://archive.plugins.jquery.com/project/crossSelect</a> - no filter</li>
  <li><a href="http://quasipartikel.at/multiselect/" rel="nofollow noreferrer">http://quasipartikel.at/multiselect/</a> - does not allow multiple selections</li>
  <li><a href="http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html" rel="nofollow noreferrer">http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html</a> - no filter</li>
  <li><a href="http://davidwalsh.name/demo/multi-select.php" rel="nofollow noreferrer">http://davidwalsh.name/demo/multi-select.php</a> - uses MooTools; no filter</li>
  <li><a href="http://devblog.jasonhuck.com/assets/comboselect/" rel="nofollow noreferrer">http://devblog.jasonhuck.com/assets/comboselect/</a> - no filter</li>
  <li><a href="http://www.dhtmlgoodies.com/index.html?whichScript=multiple_select" rel="nofollow noreferrer">http://www.dhtmlgoodies.com/index.html?whichScript=multiple_select</a> - no filter</li>
  <li><a href="http://blog.cbolson.com/expanding-multiple-select-list-with-search-filter/" rel="nofollow noreferrer">http://blog.cbolson.com/expanding-multiple-select-list-with-search-filter/</a> - MooTools</li>
  </ul>
  
  <p>These are nearly perfect:</p>
  
  <ul>
  <li><a href="https://github.com/rabihkodeih/bootstrap-transfer" rel="nofollow noreferrer">https://github.com/rabihkodeih/bootstrap-transfer</a> - uses <code>div</code> tags (instead of <code>&lt;select&gt;</code>)?</li>
  <li><a href="http://www.senamion.com/blog/jmultiselect2side.html" rel="nofollow noreferrer">http://www.senamion.com/blog/jmultiselect2side.html</a> - No regex search</li>
  <li><a href="http://mind2soft.com/labs/jquery/multiselect/" rel="nofollow noreferrer">http://mind2soft.com/labs/jquery/multiselect/</a> - No regex search</li>
  </ul>
  
  <p>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.)</p>
  
  <h1>Question</h1>
  
  <p>What is a free and open source widget (jQuery or pure JavaScript) that meets these requirements?</p>
  
  <h1>Related</h1>
  
  <p>Related links:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/11165884/multiselect-two-column-transfer-widget-with-twitter-bootstrap-theme">Multiselect two-column transfer widget with Twitter bootstrap theme</a></li>
  </ul>