A jQuery plugin that progressively enhances an HTML Select Box into a Single/Multiple option dropdown list
npm install sumoselectjquery.sumoselect
=============
jquery.sumoselect.js - A beautiful cross device Single/Multi Select jQuery Select plugin.
-------------------------------------------------------------------------------
A jQuery plugin that progressively enhances an HTML Select Box into a Single/Multiple option dropdown list. The dropdown list can be fully customizable using simple css.
It can adapt itself according to any device, keeping in mind that the User Experience is not broken.
html
`
Notable Features
- Inline Search.
- Optgroup support.
- Single and Multi select option.
- Fully customizable by simple css.
- Supports almost all devices.
- Intelligently Renders itself according to the devices.
- Renders native Single/Multiple pop up on Android, ios, Windows and other devices.
- Custom postback data format (Multiple select data can be passed either as csv or default select)
- Selected, Disabled, and Placeholder Support
- Easily extendable to allow developers to create new widgets
Requirements
jQuery 1.8.3+ (It is always recommended to use the latest version of jQuery)
Desktop Browser Support
IE8+, Firefox 4+, Chrome, Safari 4+, Opera 11+ (Other browsers may work, but I did not test on them)
Mobile/Tablet Browser Support
iOs 3+, Android 2.1+ , Windows Mobile (Other browsers may work, but I did not test on them)
Forking
If you find that you need a feature that SumoSelect does not currently support, either let me know via the SumoSelect issue tracker, or fork SumoSelect on Github and easily extend SumoSelect to create your own widget!
Usage
To just go with the default options simply do
`javascript
$(document).ready(function () {
$('.selectBox').SumoSelect();
});
`
To provide optional settings, simply pass a settings object to SumoSelect()
`javascript
$(document).ready(function () {
$('.selectBox').SumoSelect({
placeholder: 'This is a placeholder',
csvDispCount: 3
});
});
`
You can also use data attributes to set options
`html
`
If you want an instance to the SumoSelect object to call handler methods
`javascript
const select;
$(document).ready(function () {
select = $('.selectBox').SumoSelect();
});
`
NOTE: SumoSelect returns an array of select elements if there are more than one in the matching selector.
You can also find the instance to the SumoSelect object by directly selecting your select element like
`javascript
$('select.selectBox')[0].sumo. .....
`
You can perform all the operations on the underlying original select and then reload the UI by
`javascript
$('select.selectBox')[0].sumo.reload();
`
##### You can bind your handlers to some sumoselect specific events eg.
`javascript
$('select.selectBox').on('sumo:opened', function(sumo) {
// Do stuff here
console.log("Drop down opened", sumo)
});
`
Available events
- sumo:opened
- sumo:opening
- sumo:closing
- sumo:closed
- sumo:initialized
- sumo:unloaded
Settings
Below are the available settings:
- placeholder (string) The palceholder text to be displayed in the rendered select widget (on priority basis). Maximum priority is given to native placeholder attribute in select tag i.e. - - Then the option with disabled and selected attribute i.e.