A jQuery Single/Multi-Select Plugin | sumoselect

jquery.sumoselect is a jQuery plugin that incrementally improves the HTML select box in a dropdown for single/multiple options. The dropdown can be fully customizable with simple CSS.

sumoselect css download, sumoselect reset, sumo select trigger change, cannot read property sumo of undefined, sumo js

Features

  • Embedded search.
  • optgroup support.
  • Single and multi-select options.
  • Fully customizable via simple CSS.
  • It supports almost all devices.
  • It displays itself intelligently according to the devices.
  • Shows single/multiple popups on Android, iOS, Windows, and other devices.
  • Custom Postback Data Format (Multiple select data can be passed in either CSV or default select format)
  • Defined, disabled, and placeholders support
  • Easily extendable to allow developers to create new UI elements

How to make use of it:

1. Include the newest model of the jQuery library within the internet web page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2. Include the jQuery sum select plugin’s javascript and CSS after the jQuery library.

<script src="jquery.sumoselect.min.js"></script>
<link href="sumoselect.css" rel="stylesheet" />

3. Create a number of choose lists following the Html structure like this.

<select multiple="multiple" placeholder="Pick a brand" class="SlectBox">
<option selected value="volvo">Volvo</option>
<option value="ford">Ford</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
</select>

4. Call the plugin to allow the dropdown choose list.

$('.SlectBox').SumoSelect();

5. All the default choices and callbacks.

// Dont change it here.
placeholder: 'Select Here',   

// display no. of items in multiselect. 0 to display all.
csvDispCount: 3,              

// format of caption text. you can set your locale.
captionFormat:'{0} Selected', 

// format of caption text when all elements are selected. set null to use captionFormat. It will not work if there are disabled elements in select.
captionFormatAllSelected:'{0} all selected!', 

// Screen width of device at which the list is rendered in floating popup fashion.
floatWidth: 400,              

// force the custom modal on all devices below floatWidth resolution.
forceCustomRendering: false, 

nativeOnDevice: ['Android', 'BlackBerry', 'iPhone', 'iPad', 'iPod', 'Opera Mini', 'IEMobile', 'Silk'], 

// true to POST data as csv ( false for Html control array ie. deafault select )
outputAsCSV: false,      

// seperation char in csv mode     
csvSepChar: ',',     

// display ok cancel buttons in desktop mode multiselect also.         
okCancelInMulti: false,       

// for okCancelInMulti=true. sets whether click outside will trigger Ok or Cancel (default is cancel).
isClickAwayOk: false,         

// im multi select mode wether to trigger change event on individual selection or combined selection.
triggerChangeCombined: true,  

// to display select all button in multiselect mode.|| also select all will not be available on mobile devices.
selectAll: false,          

// to display input for filtering content. selectAlltext will be input text placeholder
search: false,                

// placeholder for search input
searchText: 'Search...',      

searchFn: function(haystack, needle) { // search function
  return haystack.toLowerCase().indexOf(needle.toLowerCase()) < 0;
},

noMatch: 'No matches for "{0}"',

// some prefix usually the field name. eg. '<b>Hello</b>'
prefix: '',                   

// all text that is used. don't change the index.
locale: ['OK', 'Cancel', 'Select All'],  

// set true to open upside.
up: false,

// set to false to prevent title (tooltip) from appearing
showTitle: true                               

6. It at the moment helps with icons and customize choices.

$('.SlectBox').SumoSelect({
  renderLi: (li, originalOption) => {
    // Edit your li here
    return li;
  }
});

7. API strategies.

var mySelect = $('.SlectBox').SumoSelect();

// add a new item
mySelect.add(value [,text][,index])

// remove an item
mySelect.remove(index)

// select an item
mySelect.selectItem(index/value)

// unselect an item
mySelect.unSelectItem(index/value)

// disable an item
mySelect.disableItem(index)

// re-enable an item
mySelect.enableItem(index)

// select all items
mySelect.selectAll()

// unselect all items
mySelect.unSelectAll()

// enable the plugin
mySelect.enable()

// disable the plugin
mySelect.disable()

// reload the plugin
mySelect.reload()

8. Events.

$('.SlectBox').on('sumo:opened', function(sumo) {
  // Do stuff here
});

$('.SlectBox').on('sumo:opening', function(sumo) {
  // Do stuff here
});

$('.SlectBox').on('sumo:closed', function(sumo) {
  // Do stuff here
});

$('.SlectBox').on('sumo:closing', function(sumo) {
  // Do stuff here
});

Settings

The following settings are available now:

OptionTypeDescription
placeholder(string)The placeholder text is to be displayed in the rendered select widget (on a priority basis). *Maximum priority is given to native placeholder attribute in select tag i.e. – <select placeholder="this is a placeholder" /> – Then the option with disabled and selected attributes i.e. <option disabled selected value="foo" > – Last to the given placeholder attribute in the settings. *
csvDispCount(int)The number of items to be displayed in the widget separated by an , after that the text will be warped as 3+ Selected. Set 0 for all the options.
captionFormat(string)It’s the format in which you want to see the caption when more than csvDispCount items are selected. its default value is'{0} Selected' ( here {0} will be replaced by the selection count )
captionFormatAllSelected(string)I Format of caption text when all elements are selected. set null to use caption format. It will not work if there are disabled elements in select. default is '{0} all selected!'
floatWidth(int)The minimum screen width of the device below which the options list is rendered in a floating popup fashion.
forceCustomRendering(boolean) Force the custom modal ( Floating list ) on all devices below floatWidth resolution.
nativeOnDevice(Array[string])The keywords to identify a mobile device are from the user agent string. The system default select list is rendered on the matched device.
outputAsCSV(boolean)true to POST data as CSV ( false for default select )
csvSepChar(string)Separation char if outputAsCSV is set to true
okCancelInMulti(boolean)Displays Ok Cancel buttons in desktop mode multi-select also.
isClickAwayOk(boolean)for okCancelInMulti=true. sets whether clicking outside will trigger Ok or Cancel (default is canceled).
triggerChangeCombined(boolean)In Multiselect mode whether to trigger the change event on the individual selection of each item or on combined selection ( pressing of OK or Cancel button ).
selectAll(boolean)To display select all checks or not
search(boolean)To enable searching in sumoselect (default is false).
searchText(string)placeholder for search input.
searchFn(function)Custom search function.
noMatch(string)placeholder to display if no items match the search term (default ‘No matches for “{0}”‘).
prefix(string)prefix to prepend the selected text (default is empty) eg. ‘<b>Hello</b>’.
locale(array)change the text used in plugin ([‘OK’, ‘Cancel’, ‘Select All’]). Note: don’t break the sequence or skip items.
up(boolean)the direction in which to open the dropdown (default: false)
showTitle(boolean)set to false to prevent the title (tooltip) from appearing (default: true)
max(int)Maximum number of selected options (if multiple)
renderLi(function)Custom <li> item renderer.

Animated & Cross-Device jQuery Select Box Replacement, jquery.sumoselect Plugin/Github


See Demo And Download

Official Website(HemantNegi): Click Here

This superior jQuery/javascript plugin is developed by HemantNegi. For extra Advanced Usage, please go to the official website.

Share