side-by-side-multiselect

1.4.4 • Public • Published

SideBySideMultiSelect

Is a javascript multiselectbox with filters for select html tag

Live Demo

You can check the live demo right here

Side by side select for multiselect demo

Usage:

On npm: side-by-side-multiselect

Style setup in css

:root {
    --sideBySiteMultiSelectColor: red;
    --sideBySiteMultiSelectHeight: 200px;
    --sideBySiteMultiSelectSearchFocusColor: yellow;
    --sideBySiteMultiSelectButtonBackgroundColor: blue;
    --sideBySiteMultiSelectButtonBorder: 2px solid pink;
    --sideBySiteMultiSelectSearchFocusBgColor: green;
    --sideBySiteMultiSelectBorderWidth: 2px;
    --sideBySiteMultiSelectOrderSize: 30px;
    --sideBySiteMultiSelectButtonColor: yellow;
}

SideBySideMultiSelect

<select class="js-sidebysidemultiselect" id="demo1" multiple="multiple" name="tools[]">
    <option value="C++">C++</option>
    <option value="JavaScript">JavaScript</option>
    <option value="PHP">PHP</option>
    <option value="Python">Python</option>
    <option value="Ruby">Ruby</option>
</select>

<script src="side-by-side-multiselect.umd.min.js"></script>
<script type="text/javascript">
    SideBySideMultiselect();
</script>

Simple SideBySideMultiSelect without filter

<select class="js-sidebysidemultiselect" id="demo2" multiple="multiple" name="tools[]">
    <option value="google" selected="selected">Google</option>
    <option value="microsoft">Microsoft</option>
    <option value="apple">Apple</option>
    <option value="amazon">Amazon</option>
    <option value="yahoo" selected="selected">Yahoo</option>
    <option value="yandex" selected="selected">Yandex</option>
    <option value="polycom">Polycom</option>
    <option value="jquery">jQuery</option>
    <option value="script">Script</option>
</select>

<script src="side-by-side-multiselect.umd.min.js"></script>
<script type="text/javascript">
    SideBySideMultiselect({
        'selector': '.myselectfield',
        'hidefilter': true
    });
</script>

SideBySideMultiSelect Options

Example use of the options.

SideBySideMultiselect({
    'selector': '.js-sidebysidemultiselect',
    'hidefilter': true,
    'hideCounter': false,
    'showfilterplaceholder': true,
    'hidefilterlabel': true,
    labels: {
        'filter': 'Filter',
        'selected': 'Selected'
    },
    classSettings: {
        'labelclass': 'your-labelclass',
        'wrapperclass': 'your-wrapperclass',
        'optionclass': 'your-optionclass',
        'boxesclass': 'your-boxesrclass',
        'searchclass': 'your-searchclass',
        'counterclass': 'your-counterclass',
        'orderclass': 'your-orderboxclass'
    },
    buttons: {
        'arrow': 'innerHTML for toTop and ToBottom',
        'singlearrow': 'innerHTML for up and down',
        'trashicon': 'innerHTML for remove',
    }
});
Option Type Default Description
selector string .js-sidebysidemultiselect Name of the selector for example '.js-sidebysidemultiselect'
hideFilter boolean false Hide the filter
hidefilterlabel boolean false add a label to filter input
showfilterplaceholder boolean false Add a placeholder to the filter input
classSettings object See options example Name of the skin, it will add a class to the lightbox so you can style it with css.
hideCounter boolean false Hide the counter
orderOption boolean false display the manual order elements
buttons object See options example HTML for the Buttons
labels object See options example The label content

Including SideBySideMultiSelect

SideBySideMultiSelect is distributed as an ES6 module, but there is also a UMD module included. How to install

npm i side-by-side-multiselect

Example with vanilla js

This is what I used in the demo. Checkout index.html and demo.js.

import SideBySideMultiselect from './side-by-side-multiselect.js';

window.onload = function() {
    SideBySideMultiselect({
        'selector': '.js-sidebysidemultiselectdemo2',
        'hidefilter': true,
        'hideCounter': true,
    });
}

Include in your html. Notice the type attribute:

<script src="./demo.js" type="module"></script>

To support IE and legacy browsers, use the nomodule script tag to include separate scripts that don't use the module syntax:

<script nomodule src="js/side-by-side-multiselect.umd.js"></script>

Author

[Thomas Scheibitz][scheibome]

License

MIT [scheibome]: https://github.com/scheibome/

Package Sidebar

Install

npm i side-by-side-multiselect

Weekly Downloads

10

Version

1.4.4

License

MIT

Unpacked Size

800 kB

Total Files

22

Last publish

Collaborators

  • scheibo