https://github.com/scheibome/side-by-side-multiselect

JavaScript multiselectboxes with filters for select html tag
https://github.com/scheibome/side-by-side-multiselect

Last synced: 3 months ago
JSON representation

JavaScript multiselectboxes with filters for select html tag

• Host: GitHub
• URL: https://github.com/scheibome/side-by-side-multiselect
• Owner: scheibome
• License: mit
• Created: 2021-05-12T16:30:54.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-06T10:43:39.000Z (almost 3 years ago)
• Last Synced: 2025-02-26T23:51:28.255Z (over 1 year ago)
• Language: JavaScript
• Homepage: https://scheibome.github.io/side-by-side-multiselect/
• Size: 726 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
SideBySideMultiSelect

=====================

Is a **javascript** multiselectbox with filters for `select` html tag

## Live Demo

You can check the live demo [right here](https://scheibome.github.io/side-by-side-multiselect/)

![Side by side select for multiselect demo](src/images/demo.gif)

## Usage:

**On npm**: `side-by-side-multiselect`

## Style setup in css

~~~css

:root {

    --sideBySiteMultiSelectColor: red;

    --sideBySiteMultiSelectHeight: 200px;

    --sideBySiteMultiSelectSearchFocusColor: yellow;

    --sideBySiteMultiSelectButtonBackgroundColor: blue;

    --sideBySiteMultiSelectButtonBorder: 2px solid pink;

    --sideBySiteMultiSelectSearchFocusBgColor: green;

    --sideBySiteMultiSelectBorderWidth: 2px;

    --sideBySiteMultiSelectOrderSize: 30px;

    --sideBySiteMultiSelectButtonColor: yellow;

}

~~~

## SideBySideMultiSelect

~~~html

    C++

    JavaScript

    PHP

    Python

    Ruby

    SideBySideMultiselect();

~~~

## Simple SideBySideMultiSelect without filter

~~~html

    Google

    Microsoft

    Apple

    Amazon

    Yahoo

    Yandex

    Polycom

    jQuery

    Script

    SideBySideMultiselect({

        'selector': '.myselectfield',

        'hidefilter': true

    });

~~~

## SideBySideMultiSelect Options

Example use of the options.

~~~javascript

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.

```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:

```html

```

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

```html

```

Author

------

[Thomas Scheibitz][scheibome]

License

-------

[MIT](https://opensource.org/licenses/MIT)

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