jQuery dg-magnet-combo (no CTL+Click Select/List with just one line)

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:

- Used inbuilt javascript/jQuery functions instead of self-made.
- Made it work with CTL key pressed. So now it works normal when someone uses it with CTL key pressed and then takes back (in hybrid mode)

Todo: Need to verify and test SHIFT key compatibility to make it work in natural mode when used with SHIFT key.

Bugs: Please let me know if you encounter any problem/bug while using this plugin. Either post comment on this blog or create an issue on github repository.

PS: I should have done a Google search properly before writing this one, I saw Anup Gupta has made his efforts in this direction and this plugin has some inspiration from his code for v1.1. But additionally this plugin has CTL key support which I could not see available somewhere else.

Similar Posts: