Have you ever faced an issue while writing a code for your website and you want a custom multi-select jQuery plugin that you can customize according to your site? There are many select plugins out there that can help you like Chosen, etc.
In this blog, we will introduce you to a jQuery plugin named SumoSelect, a cross-browser, cross-device multi-select plugin. It works better with mobile devices and does not affect any broken user experience like other plugins might do.
SumoSelect -jQuery plugin
It makes simple HTML select option more workable and can be customized beautifully with the help of css. On mobile device it uses the default control option of the device for better user experience.
SumoSelect is easy to implement and use. You can simply create a select element with all the options in it and add a class like “selectinput”. Initialize the control like:
$(document).ready(function() {
$('.selectinput').SumoSelect();
});If you want to add optional settings, provide it by using settings object:
$(document).ready(function () {
$('.selecinput').SumoSelect({
placeholder: 'type your placeholde here',
csvDispCount: 3
});
});With Select all options check and “OK/Cancel” Buttons.
$('.selectinput').SumoSelect({ okCancelInMulti: true, selectAll: true });
Force custom rendering in low res devices. This will be done automatically by plugin on low res devices if it is unable to identify the device.
$('.selectinput').SumoSelect({
okCancelInMulti: true ,
triggerChangeCombined: true,
forceCustomRendering: true
});You can even call an insance to sumoselect object to call handler methods
var MySelection;
$(document).ready(function () {
MySelection = $('.selectinput').SumoSelect();
});Requirements for the plugin:
SumoSelect jQuery plugin requires jQuery 1.8.3 + (always go with the latest version of jQuery)
There are many settings to play within this plugin. Customize as much as you want. If you need a feature that this jQuery plugin does not provide, you can fork SumoSelect on Github and easily extend SumoSelect to create your own widget.
Do let us know what do you think of this pluign and if you know a plugin that works better than this share it with us in the comments below.
