jQuery dg-magnet-combo (no CTL+Click Select)

Basically I wanted to write this plugin since long long time but could not get a while to hold and push my thoughts as a code to form this plugin. As the name suggests (which seems kind of difficult to understand the real purpose of this plugin) it does not deselect existing option when one selects another option in multi-selection list/combo-box.  How does this sound? Yes, w/o having your control key pressed. Basically I have been found of changing the default behavior of the html controls and with this new jQuery Magnet Multi-select List plugin, I will continue this trend. If you have already understood the meaning and purpose of this plugin you can move to plugin-usage without reading more boarding story about the plugin.

One would say that it's very easy you just have to hold the CTL key while selecting another option in combo-box but it's going to be very irritating when you have hundreds of options in your list and you have to select multiple out of them one of them is on top and the other one at the end of list, which makes it keeping that CTL key difficult and if one misses out CTL hold for a while and clicks he's gone. He has to start from all over again. To get rid of this problem many web-developers implement their lists/combo-box in ways where one has to click > select and move options from left-to-right and those on the right-side are the ones which are being selected by users. But this plugin will make your life as a developer and users life much easier by not dropping down the selected option each time they select another. Basically this will help many users who are less-friendly with computers and web in general and this plugin development with jQuery came in mind just out of need for such a plugin who can do so and as per my knowledge so far we don't have such plugin available for any javascript library.

Learning from the past experiences, this plugin will support accessibility from the beginning. Yes, there is a keyboard support too.

To use DG Magnet Combo plugin just add following code in your javascript:

$(document).ready(function(){
	$("#my_list").dgMagnetCombo();
});

See live demo here or goto github repository to download or fork.

Update: Plugin updated to 1.1 with following changes: Read the rest of this entry »

Tags: browser, jQuery, Plugin, Programming