Filterable multi-select combobox shuttle/transfer widget
combobox, filter, javascript, jquery, widget
Solution
A nice jquery/bootstrap plugin (multiple select, two pane, filter with regex):
Bootstrap Dual Listbox: http://www.virtuosoft.eu/code/bootstrap-duallistbox/
Problem
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? Related Related links: - Multiselect two-column transfer widget with Twitter bootstrap theme