SumoSelect – A cross device jQuery Select Plugin

SumoSelect

The jQuery.SumoSelect script replaces the default, ugly Select form fields with design- and configurable Cross-Device Select Boxes. The script itself requires jQuery (at least v.1.8.3) and is compatible with 8, 5, 4, 4 and 11. Please Note: The latest jQuery libraries doesn’t has such a deep browser-compatibility, so you NEED a older jQuery Version if you want to still support the Internet Explorer 8!

This Select replacement supports Single and Multiple Selection fields including Pre-Selected / Pre-Disabled options and Optgroups. A Search function, Handle Buttons as well as some basic methods to manipulate the selection list are included as well. It’s also completely translat- and designable, and allows to render the device-native Popup field if desired! It still works seamless, even if it’s not maintained since 2016!

Download the latest version of jQuery.SumoSelect as .ZIP or as .TAR package!

npm i sumoselect --save

yarn add sumoselect --save

bower install sumoselect --save

Instructions

The package itself contains the main JavaScript file, as normal and minified version, as well as a default Stylesheet, also available as minified version. The Stylesheet is maybe a bit confusing, according to the Indents, but after you beautify this few lines you can easily adapt the jQuery.SumoSelect script to your websites-native design!

 

Load SumoSelect

It’s highly recommended to load the Stylesheet between the HTML <head> tags. The JavaScript can located wherever you want, but we recommend it to load it directly after the first HTML <body> tag.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/sumoselect.css" />
    </head>
    <body>
        <!-- Required jQuery Library -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/jquery.sumoselect.min.js"></script>
    </body>
</html>

 

Configure SumoSelect

The current version of this Select Replacement Script supports 21 options, to configure the design and it’s behavior. There are also 6 options, which allows to translate the respective strings into your own native language!

jQuery(document).ready(function($){
    $("select").SumoSelect({
        placehoder:                 "Select Here",
        csvDispCount:               3,
        captionFormat:              "{0} Selected",
        captionFormatAllSelected:   "{0} all selected!",
        floatWidth:                 400,
        forceCustomRendering:       false,
        nativeOnDevice:             [
            "Android", "BlackBerry", "iPhone", "iPad", "iPod", "Opera Mini", "IEMobile", "Silk"
        ],
        outputAsCSV:                false,
        csvSepChar:                 ",",
        okCancelInMulti:            false,
        isClickAwayOk:              false,
        triggerChangeCombined:      true,
        selectAll:                  false,
        search:                     false,
        searchText:                 "Search...",
        searchFn:                   function(haystack, needle){
            return haystack.toLowerCase().indexOf(needle.toLowerCase()) < 0;
        },
        noMatch:                    'No matches for "{0}"',
        prefix:                     "",
        locale:                     ["OK", "Cancel", "Select All"],
        up:                         false,
        showTitle:                  true
    });
});

 

Configure: Options

placeholder
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. - <select placeholder="Placeholder String"> - Then the option with disabled and selected attribute i.e. <option disabled selected value="foo"> - Last to to the given placeholder attribute in the settings.
csvDispCount
The number of items to be displayed in the widget seperated by a , after that the text will be warped as 3+ Selected. Set 0 for all the options.
captionFormat
Its the format in which you want to see the caption when more than csvDispCount items are selected. Its default value is '{0} Selected' (The {0} will be replaced by the seletion count)
captionFormatAllSelected
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.
floatWidth
Minimum screen width of device below which the options list is rendered in floating popup fashion.
forceCustomRendering
Force the custom modal (Floating list) on all devices below floatWidth resolution.
nativeOnDevice
The keywords to identify a mobile device from useragent string. The system default select list is rendered on the matched device.
outputAsCSV
true to POST data as csv.
csvSepChar
Seperation char if outputAsCSV is set to true,
okCancelInMulti
Displays OK and Cancel buttons in desktop mode multiselect also.
isClickAwayOk
For okCancelInMulti = true. Sets whether click outside will trigger OK or Cancel (default is Cancel).
triggerChangeCombined
In Multiselect mode whether to trigger change event on individual selection of each item or on combined selection (pressing of OK or Cancel button).
selectAll
To display select all check or not
search
To enable searching in sumoselect.
searchText
Placeholder for the search input.
noMatch
Placeholder to display if no items matches the search term.
prefix
Prefix to prepend the selected options-text.
locale
Change the text used within the plugin (['OK', 'Cancel', 'Select All']). Note: don't break the sequence or skip items.
up
The direction in which to open the dropdown field.
showTitle
Set this option to false to prevent title (tooltip) from appearing.

Leave a Reply

Top