{"id":24659105,"url":"https://github.com/scheibome/side-by-side-multiselect","last_synced_at":"2026-05-11T04:46:22.974Z","repository":{"id":47332759,"uuid":"366781680","full_name":"scheibome/side-by-side-multiselect","owner":"scheibome","description":"JavaScript multiselectboxes with filters for select html tag","archived":false,"fork":false,"pushed_at":"2023-10-06T10:43:39.000Z","size":743,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-26T23:51:28.255Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://scheibome.github.io/side-by-side-multiselect/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scheibome.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-12T16:30:54.000Z","updated_at":"2023-10-06T10:43:44.000Z","dependencies_parsed_at":"2025-01-26T02:32:18.041Z","dependency_job_id":"61feec0f-d125-4ffd-8db1-4c9c67436073","html_url":"https://github.com/scheibome/side-by-side-multiselect","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scheibome%2Fside-by-side-multiselect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scheibome%2Fside-by-side-multiselect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scheibome%2Fside-by-side-multiselect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scheibome%2Fside-by-side-multiselect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scheibome","download_url":"https://codeload.github.com/scheibome/side-by-side-multiselect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244744234,"owners_count":20502876,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-26T02:31:53.365Z","updated_at":"2026-05-11T04:46:17.940Z","avatar_url":"https://github.com/scheibome.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"SideBySideMultiSelect\n=====================\n\nIs a **javascript** multiselectbox with filters for `select` html tag\n\n## Live Demo\n\nYou can check the live demo [right here](https://scheibome.github.io/side-by-side-multiselect/)\n\n![Side by side select for multiselect demo](src/images/demo.gif)\n\n## Usage:\n\n**On npm**: `side-by-side-multiselect`\n\n## Style setup in css\n\n~~~css\n:root {\n    --sideBySiteMultiSelectColor: red;\n    --sideBySiteMultiSelectHeight: 200px;\n    --sideBySiteMultiSelectSearchFocusColor: yellow;\n    --sideBySiteMultiSelectButtonBackgroundColor: blue;\n    --sideBySiteMultiSelectButtonBorder: 2px solid pink;\n    --sideBySiteMultiSelectSearchFocusBgColor: green;\n    --sideBySiteMultiSelectBorderWidth: 2px;\n    --sideBySiteMultiSelectOrderSize: 30px;\n    --sideBySiteMultiSelectButtonColor: yellow;\n}\n~~~\n\n## SideBySideMultiSelect\n\n~~~html\n\u003cselect class=\"js-sidebysidemultiselect\" id=\"demo1\" multiple=\"multiple\" name=\"tools[]\"\u003e\n    \u003coption value=\"C++\"\u003eC++\u003c/option\u003e\n    \u003coption value=\"JavaScript\"\u003eJavaScript\u003c/option\u003e\n    \u003coption value=\"PHP\"\u003ePHP\u003c/option\u003e\n    \u003coption value=\"Python\"\u003ePython\u003c/option\u003e\n    \u003coption value=\"Ruby\"\u003eRuby\u003c/option\u003e\n\u003c/select\u003e\n\n\u003cscript src=\"side-by-side-multiselect.umd.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n    SideBySideMultiselect();\n\u003c/script\u003e\n~~~\n\n\n## Simple SideBySideMultiSelect without filter\n\n~~~html\n\u003cselect class=\"js-sidebysidemultiselect\" id=\"demo2\" multiple=\"multiple\" name=\"tools[]\"\u003e\n    \u003coption value=\"google\" selected=\"selected\"\u003eGoogle\u003c/option\u003e\n    \u003coption value=\"microsoft\"\u003eMicrosoft\u003c/option\u003e\n    \u003coption value=\"apple\"\u003eApple\u003c/option\u003e\n    \u003coption value=\"amazon\"\u003eAmazon\u003c/option\u003e\n    \u003coption value=\"yahoo\" selected=\"selected\"\u003eYahoo\u003c/option\u003e\n    \u003coption value=\"yandex\" selected=\"selected\"\u003eYandex\u003c/option\u003e\n    \u003coption value=\"polycom\"\u003ePolycom\u003c/option\u003e\n    \u003coption value=\"jquery\"\u003ejQuery\u003c/option\u003e\n    \u003coption value=\"script\"\u003eScript\u003c/option\u003e\n\u003c/select\u003e\n\n\u003cscript src=\"side-by-side-multiselect.umd.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n    SideBySideMultiselect({\n        'selector': '.myselectfield',\n        'hidefilter': true\n    });\n\u003c/script\u003e\n~~~\n\n## SideBySideMultiSelect Options\n\nExample use of the options.\n\n~~~javascript\nSideBySideMultiselect({\n    'selector': '.js-sidebysidemultiselect',\n    'hidefilter': true,\n    'hideCounter': false,\n    'showfilterplaceholder': true,\n    'hidefilterlabel': true,\n    labels: {\n        'filter': 'Filter',\n        'selected': 'Selected'\n    },\n    classSettings: {\n        'labelclass': 'your-labelclass',\n        'wrapperclass': 'your-wrapperclass',\n        'optionclass': 'your-optionclass',\n        'boxesclass': 'your-boxesrclass',\n        'searchclass': 'your-searchclass',\n        'counterclass': 'your-counterclass',\n        'orderclass': 'your-orderboxclass'\n    },\n    buttons: {\n        'arrow': 'innerHTML for toTop and ToBottom',\n        'singlearrow': 'innerHTML for up and down',\n        'trashicon': 'innerHTML for remove',\n    }\n});\n~~~\n\n| Option | Type | Default | Description |\n| --- | --- | --- | --- |\n| selector | string | `.js-sidebysidemultiselect` | Name of the selector for example '.js-sidebysidemultiselect' |\n| hideFilter | boolean | `false` | Hide the filter |\n| hidefilterlabel | boolean | `false` | add a label to filter input  |\n| showfilterplaceholder | boolean | `false` | Add a placeholder to the filter input  |\n| classSettings | object | `See options example` | Name of the skin, it will add a class to the lightbox so you can style it with css. |\n| hideCounter | boolean | `false` | Hide the counter |\n| orderOption | boolean | `false` | display the manual order elements |\n| buttons | object | `See options example` | HTML for the Buttons |\n| labels | object | `See options example` | The label content  |\n\n## Including SideBySideMultiSelect\n\nSideBySideMultiSelect is distributed as an ES6 module, but there is also a UMD module included.\nHow to install\n\n```npm i side-by-side-multiselect```\n\n### Example with vanilla js\nThis is what I used in the demo. Checkout index.html and demo.js.\n\n```js\nimport SideBySideMultiselect from './side-by-side-multiselect.js';\n\nwindow.onload = function() {\n    SideBySideMultiselect({\n        'selector': '.js-sidebysidemultiselectdemo2',\n        'hidefilter': true,\n        'hideCounter': true,\n    });\n}\n```\n\nInclude in your html. Notice the `type` attribute:\n```html\n\u003cscript src=\"./demo.js\" type=\"module\"\u003e\u003c/script\u003e\n```\n\nTo support IE and legacy browsers, use the `nomodule` script tag to include separate scripts that don't use the module syntax:\n\n```html\n\u003cscript nomodule src=\"js/side-by-side-multiselect.umd.js\"\u003e\u003c/script\u003e\n```\n\nAuthor\n------\n\n[Thomas Scheibitz][scheibome]\n\nLicense\n-------\n\n[MIT](https://opensource.org/licenses/MIT)\n[scheibome]: https://github.com/scheibome/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscheibome%2Fside-by-side-multiselect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscheibome%2Fside-by-side-multiselect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscheibome%2Fside-by-side-multiselect/lists"}