jQuery Plugins › jQuery Form Plugins › jQuery sumoselect

Animated & Cross-Device jQuery Select Box Replacement - sumoselect

File Size: 267 KB
Views Total: 28475
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2025

Chrome, IE9+, FireFox, Opera, Safari#Select#Multiple Select
Animated & Cross-Device jQuery Select Box Replacement - sumoselect

sumoselect is a jQuery select replacement plugin which turns the native select box into a responsive, animated, fully customizable dropdown select list.

Features:

  • Cross-Device. Supports desktop and mobile devices.
  • Easily customizable via CSS and Javascript.
  • Animated dropdown effects based on CSS3 transitions.
  • Auto resizes the dropdown list to fit the window's size.
  • Allows to select multiple items by clicking the checkboxes.
  • Placeholder and callbacks supported.

See Also:

How to use it:

1. Include the latest version of jQuery library in the web page.

<script src="/path/to/cdn/jquery.min.js"></script>

2. Include the jQuery sumoselect plugin's javascript and CSS after jQuery library.

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

3. Create a multiple select list 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 enable the dropdown select list.

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

5. All the default options 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,

// Display a disabled checkbox in multiselect mode when all the items are not selected.
selectAllPartialCheck: true,     

// 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,

// im multi select - clear all checked options
clearAll: false,         

// im multi select - close select after clear
closeAfterClearAll: false,  

// Maximum number of options selected (when multiple)  
max: null,     
               
// Custom <li> item renderer
renderLi: (li, _originalOption) => li

6. It currently supports for icons and customize options.

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

7. API methods.

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
});

Changelog:

2023-01-25

  • v3.4.9: Bugfixes

2022-07-30

  • v3.4.7/8: Bugfix

2022-04-16

  • v3.4.6: Bugfix: Select all not working on mobile.

2022-02-10

  • v3.4.5: Bug Fixes

2022-02-10

  • v3.4.3: Rename isCloseAfterClearAll to closeAfterClearAll

2022-01-05

  • v3.4.2: Console cleanup

2022-01-05

  • v3.4.1: Fixed Select disappearing on reload on mobile

2022-01-05

  • v3.4.0: New selectAllPartialCheck option

2021-10-31

  • v3.3.30: Force event bubbling up.

2021-09-03

  • v3.3.29: Fixed Search text not showing up

2021-08-11

  • v3.3.28: Fixed Placeholder not changing on click on select all.

2021-08-04

  • v3.3.27: Pass along element through searchFn

2021-07-13

  • v3.3.25/26: Bug Fixes

2021-07-06

  • v3.3.24: Bug Fixes

2021-07-05

  • v3.3.23: Bug Fixes

2021-07-01

  • v3.3.22: Bug Fixes

2021-06-28

  • v3.3.21: Bug Fixes

2021-06-27

  • v3.3.11: Bug Fixes

2021-06-21

  • v3.3.10: Bug Fixes

2021-06-19

  • v3.3.2: New custom <li> renderer. 

2021-06-18

  • CSS update on release + Remove useless files
  • Stop copying missing file

2021-06-17

  • Bugfix: Selected options on safari

2018-02-28

  • Add custom match function for search

2017-03-07

  • Fxes in select all keyboard shortcuts.

2017-03-06

  • Added keyboard shortcuts for select/unselect all. 

2017-03-03

  • Added custom sumo events

2017-03-02

  • Fixed Keyboard access to OK and Cancel buttons in Multiselect

2016-04-30

  • v3.0.2

2016-04-08

  • final fixes for release 3.0.0

2016-03-08

  • The much awaited optgroup support

2016-03-05

  • Search is cleared when the options are hidden
  • Fixed issue select all row is clickable

2016-03-04

  • optimised dom append operation for large lists

2016-03-03

  • added up option to open dropdown upwards

2016-02-23

  • quick fix

2015-04-29

  • fixes for ie

2015-04-17

  • fix CSS.

2015-04-09

  • FIX for IE - added focusout event with blur, seems a fix to problem

2015-04-07

  • fixed bug in multiselect on click outside

2015-04-02

  • fixed in keyboard scrolling

2015-04-01

  • fixes

2015-03-31

  • v2.0.0

2015-02-13

  • select and unselect all the options

2014-08-02

  • bug in handlers on mobile

2014-07-28

  • fixes : outputAsCSV default set to false. and unload bug fixed. enhanced the display format

This awesome jQuery plugin is developed by HemantNegi. For more Advanced Usages, please check the demo page or visit the official website.