SideBySideMultiSelect

Is a javascript multiselectbox with filters for select html tag

Live Demo

You can check the live demo right here

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/