jQuery UI Multiselect
Whenever you are dealing with Select Multiple inputs, be assured it hurts. Using Javascript you can spice up that unhandy plain old vanilla Select Multiple element that comes with your browser. Inspired by various existing solutions I ended up in creating my own version of a sortable, searchable Multiselect Widget.
First off, you can visit the demo to see the widget in action.
The script depends on jQuery 1.3 and jQuery UI 1.7 and is style-able using Themeroller. It works in an unobtrusive fashion, by just turning html multiple select inputs into a sexier equivalent. There’s no extra markup needed.
Usage
Add the library references.
Define your selectbox having the multiple attribute set.
Finally, you are ready to invoke the Multiselect spirits.
I already received a multitude of suggestions and contributions on this. The response was simply overwhelming.
List of potential improvements
Search within available options, if there are a lots of themDisplaying counts of selectedand available itemsSelect All / Deselect All ButtonsDragging items from the available list to the selected list directly- AJAX Support (thanks to Yanick Rochon)
I’ll try to get some time for improving the widget based on the suggestions. I’ll keep you posted about progress. Please feel free to work on my code. The latest source code is always available on Github. Just let me know if you did some modifications, so I’m able to include them.
Update#1
Added search capabilities, count of selected items and Select/Deselect All Buttons.
Update#2
Added Drag&Drop support. Also some major IE bugs have been addressed (still some remaining…).
