Animated & Cross-Device jQuery Select Box Replacement - sumoselect

Animated & Cross-Device jQuery Select Box Replacement - sumoselect
File Size: 26.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

Basic Usage:

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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,          

// 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. 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()

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

Change logs:

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.