A jQuery Single/Multi-Select Plugin | sumoselect

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:

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

See Demo And Download