{"id":21835333,"url":"https://github.com/laurarozier/openmultiselect","last_synced_at":"2025-03-21T14:22:54.073Z","repository":{"id":94190687,"uuid":"165566185","full_name":"LauraRozier/openMultiSelect","owner":"LauraRozier","description":"Dual list style multi-select for MDBootstrap","archived":false,"fork":false,"pushed_at":"2019-02-04T15:59:51.000Z","size":212,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-26T10:07:26.127Z","etag":null,"topics":["bootstrap","bootstrap4","jquery","jquery-plugin","mdbootstrap","multi-select","multiselect"],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LauraRozier.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-01-13T23:30:19.000Z","updated_at":"2019-02-04T15:50:51.000Z","dependencies_parsed_at":"2023-03-22T13:03:23.955Z","dependency_job_id":null,"html_url":"https://github.com/LauraRozier/openMultiSelect","commit_stats":null,"previous_names":["laurarozier/openmultiselect"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LauraRozier%2FopenMultiSelect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LauraRozier%2FopenMultiSelect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LauraRozier%2FopenMultiSelect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LauraRozier%2FopenMultiSelect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LauraRozier","download_url":"https://codeload.github.com/LauraRozier/openMultiSelect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244811666,"owners_count":20514350,"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":["bootstrap","bootstrap4","jquery","jquery-plugin","mdbootstrap","multi-select","multiselect"],"created_at":"2024-11-27T20:19:40.904Z","updated_at":"2025-03-21T14:22:54.024Z","avatar_url":"https://github.com/LauraRozier.png","language":"CSS","readme":"**openMultiSelect** provides a multi-select that is compatible with MDBootstrap for Bootstrap v4.\n\n## Navigation\n\n- [Disclaimer](#disclaimer)\n- [License](#license)\n- [Special Thanks](#special-thanks)\n- [Data Format](#data-format)\n- [Configuration](#configuration)\n- [Public Methods](#public-methods)\n  - [Available Methods](#available-methods)\n- [Preview](#preview)\n\n## Disclaimer\n\nThis plugin is a one-man job and is developed separately from any other projects. The only help I had was by testing and feedback. I used the MDBootstrap and Bootstrap v4 SCSS variables and mixins to try and stick as closely as possible to their styles for future compatibility. If there are any issues and/or suggestions, feel free to contact me via an issue on this project or email. (Can be found in the file headers.)\n\n## License\n\n`\"THE BEER-WARE LICENSE\" (Revision 44)` See the file headers for more information. It's pretty much PD.\n\n## Special Thanks\n\n- [MDBootstrap](https://mdbootstrap.com/) For improving Bootstrap 4 and providing their own UI elements/styling.\n- [Bootstrap](https://getbootstrap.com/) For being an awesome UI framework.\n- [jQuery](https://jquery.com/) For being an awesome JS framework.\n- [jQuery Boilerplate](https://jqueryboilerplate.com/) For being an awesome boilerplate.\n- [Smoking Rifles](https://smoking-rifles.co.uk/) For being awesome and a great test audience during development.\n\n## Data Format\n\nopenMultiSelect requires the data to be provided in a specific manner. Below you will find the data format for both the `AvailableItems` and `SelectedItems` methods.\n\nAvailableItems data format:\n```js\n[\n  { \"text\": \"item 1\", \"value\": \"i1\" },\n  { \"text\": \"item 1\", \"value\": \"i2\" },\n  // etc..\n]\n```\n\nSelectedItems data format:\n```js\n[\n  \"i1\", \"i2\", // etc..\n]\n```\n\n## Configuration\n\nThe configuration can be modified via either setting `$.fn.openMultiSelect.defaults` before initializing openMultiSelect, by passing the configuration when initializing openMultiSelect or by calling the `setConfig` method.\n\nThe configuration object:\n```js\n{\n  \"name\": \"name-for-form-data\",\n  \"ajax\": {\n    \"availableUrl\": \"https://exampe.com/api/v1/groups/available\",\n    \"selectedUrl\": \"https://exampe.com/api/v1/user/1/groups\",\n    \"method\": \"GET\",\n  },\n  \"availableItemColor\": \"red\",\n  \"selectedItemColor\": \"green\",\n  \"buttonColor\": \"primary\",\n  \"headerColor\": \"mdb-color\",\n}\n```\n\n$.fn.openMultiSelect.defaults:\n```js\n{\n  \"name\": \"oms-value-input\",\n  \"ajax\": null,\n  \"availableItemColor\": \"red\",\n  \"selectedItemColor\": \"green\",\n  \"buttonColor\": \"primary\",\n  \"headerColor\": \"mdb-color\",\n}\n```\n\n## Public Methods\n\nAfter initializing openMultiSelect you are able to call it's public methods. Public methods are called as shown below:\n```js\n$(\"#oms-div\").openMultiSelect(\n  \"someMethod\",\n  \"String Arg\",\n  [\n    \"Array Arg\",\n  ],\n  {\n    \"Object\": \"Arg\"\n  },\n  // etc..\n);\n```\n\n### Available Methods\n\n#### reloadAvailableItems\n\nReload the available items\n\nParameters:\n- `aUrl: string` Sets the new URL to use when reloading the available items. Pass `null` to keep the original url. Default: `null`\n- `aIndRedraw: boolean` Indicates that the element should be redrawn on success. Default: `true`\n\nExamples:\n```js\n$(\"#oms-div\").openMultiSelect(\"reloadAvailableItems\");\n\n$(\"#oms-div\").openMultiSelect(\n  \"reloadAvailableItems\",\n  \"https://exampe.com/api/v1/groups/available\"\n);\n\n$(\"#oms-div\").openMultiSelect(\n  \"reloadAvailableItems\",\n  \"https://exampe.com/api/v1/groups/available\",\n  true\n);\n```\n\n#### reloadSelectedItems\n\nReload the selected items\n\nParameters:\n- `aUrl: string` Sets the new URL to use when reloading the selected items. Pass `null` to keep the original url. Default: `null`\n- `aIndRedraw: boolean` aIndRedraw Indicates that the element should be redrawn on success. Default: `true`\n\nExamples:\n```js\n$(\"#oms-div\").openMultiSelect(\"reloadSelectedItems\");\n\n$(\"#oms-div\").openMultiSelect(\n  \"reloadSelectedItems\",\n  \"https://exampe.com/api/v1/user/1/groupids\"\n);\n\n$(\"#oms-div\").openMultiSelect(\n  \"reloadSelectedItems\",\n  \"https://exampe.com/api/v1/user/1/groupids\",\n  true\n);\n```\n\n#### reloadItems\n\nReload both the available and selected items\n\nParameters:\n- `aAvailableUrl: string` Sets the new URL to use when reloading the available items. Pass `null` to keep the original url. Default: `null`\n- `aSelectedUrl: string` Sets the new URL to use when reloading the selected items. Pass `null` to keep the original url. Default: `null`\n- `aIndRedraw: boolean` Indicates that the element should be redrawn on success. Default: `true`\n\nExamples:\n```js\n$(\"#oms-div\").openMultiSelect(\"reloadItems\");\n\n$(\"#oms-div\").openMultiSelect(\n  \"reloadItems\",\n  \"https://exampe.com/api/v1/groups/available\"\n);\n\n$(\"#oms-div\").openMultiSelect(\n  \"reloadItems\",\n  null,\n  \"https://exampe.com/api/v1/user/1/groupids\",\n  true\n);\n```\n\n#### resetSelection\n\nReset the list of selected items to it's initial value\n\nParameters:\n- None\n\nExamples:\n```js\n$(\"#oms-div\").openMultiSelect(\"resetSelection\");\n```\n\n#### clearItems\n\nClear the lists and reset the value input element\n\nParameters:\n- None\n\nExamples:\n```js\n$(\"#oms-div\").openMultiSelect(\"clearItems\");\n```\n\n#### setAvailableItems\n\nSet the available items\n\nParameters:\n- `aItems: array` An array of all the available items\n- `aIndRedraw: boolean` Indicates that the element should be redrawn\n\nExamples:\n```js\n$(\"#oms-div\").openMultiSelect(\n  \"setAvailableItems\",\n  [\n    { text: \"test1\", value: \"t1\" },\n    { text: \"test2\", value: \"t2\" },\n    { text: \"test3\", value: \"t3\" },\n    { text: \"test4\", value: \"t4\" },\n    { text: \"test5\", value: \"t5\" },\n  ]\n);\n```\n\n#### setSelectedItems\n\nSet the selected and initial items\n\nParameters:\n- `aItems: array` An array of the selected (bound) items\n- `aIndRedraw: boolean` Indicates that the element should be redrawn\n\nExamples:\n```js\n$(\"#oms-div\").openMultiSelect(\n  \"setSelectedItems\",\n  [ \"t2\", \"t5\", ]\n);\n```\n\n#### setItems\n\nReload both the available and selected items\n\nParameters:\n- `aAvailableItems: array` An array of all the available items\n- `aSelectedItems: array` An array of the selected (bound) items\n- `aIndRedraw: boolean` Indicates that the element should be redrawn\n\nExamples:\n```js\n$(\"#oms-div\").openMultiSelect(\n  \"setItems\",\n  [\n    { text: \"test1\", value: \"t1\" },\n    { text: \"test2\", value: \"t2\" },\n    { text: \"test3\", value: \"t3\" },\n    { text: \"test4\", value: \"t4\" },\n    { text: \"test5\", value: \"t5\" },\n  ],\n  [ \"t2\", \"t5\", ]\n);\n```\n\n#### getConfig\n\nRetrieve the active configuration for this instance\n\nParameters:\n- None\n\nReturns:\n- `Object`\n\nExamples:\n```js\nconst config = $(\"#oms-div\").openMultiSelect(\"getConfig\");\n```\n\n#### setConfig\n\nModify this instance's configuration\n\nParameters:\n- `aOptions: Object` The options to set/change\n- `aIndReload: boolean` Indicates that the items shopuld be reloaded\n- `aIndRedraw: boolean` Indicates that the element should be redrawn\n\nExamples:\n```js\n$(\"#oms-div\").openMultiSelect(\n  \"setConfig\",\n  { name: \"newInputName\" },\n  false,\n  true\n);\n\n$(\"#oms-div\").openMultiSelect(\n  \"setConfig\",\n  {\n    name: \"oms-value-input\",\n    ajax: {\n      availableUrl: \"https://exampe.com/api/v1/groups/available\",\n      selectedUrl: \"https://exampe.com/api/v1/user/1/groupids\",\n      method: \"GET\",\n    },\n    availableItemColor: \"red\",\n    selectedItemColor: \"green\",\n    buttonColor: \"primary\",\n    headerColor: \"mdb-color\",\n  },\n  true,\n  true\n);\n```\n\n#### destroy\n\nRestore the DOM element to it's original state by unloading the plugin.\n\nParameters:\n- None\n\nExamples:\n```js\n$(\"#oms-div\").openMultiSelect(\"destroy\");\n```\n\n## Preview\n\nThere is a full exampel available, which loads 1000 items via a public method: [Example](../blob/master/examples/testMultiSelect.php)\n\n##### Default config:\n\n![Default config](https://github.com/thibmo/openMultiSelect/blob/master/examples/default_config.png?raw=true \"Default config\")\n\n##### Output data:\n\n![Output data](https://github.com/thibmo/openMultiSelect/blob/master/examples/output_data.png?raw=true \"Output data\")\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaurarozier%2Fopenmultiselect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaurarozier%2Fopenmultiselect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaurarozier%2Fopenmultiselect/lists"}