{"id":28089199,"url":"https://github.com/minisuperfiles/msfmultiselect","last_synced_at":"2025-05-13T12:54:48.581Z","repository":{"id":55680448,"uuid":"270350924","full_name":"minisuperfiles/MSFmultiSelect","owner":"minisuperfiles","description":"MSFmultiSelect (multiselect) is a pure JavaScript user-friendly multiselect library, don't need jQuery. It's very easy to use for developers and fast.","archived":false,"fork":false,"pushed_at":"2023-06-24T14:07:53.000Z","size":87,"stargazers_count":8,"open_issues_count":0,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-22T16:53:52.444Z","etag":null,"topics":["array-msfmultiselect","easy-to-use","javascript","minisuperfiles","multiselect","pure-javascript","without-jquery"],"latest_commit_sha":null,"homepage":"https://minisuperfiles.blogspot.com","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/minisuperfiles.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-07T15:37:14.000Z","updated_at":"2023-10-25T11:07:43.000Z","dependencies_parsed_at":"2022-08-15T06:20:42.242Z","dependency_job_id":null,"html_url":"https://github.com/minisuperfiles/MSFmultiSelect","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minisuperfiles%2FMSFmultiSelect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minisuperfiles%2FMSFmultiSelect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minisuperfiles%2FMSFmultiSelect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minisuperfiles%2FMSFmultiSelect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/minisuperfiles","download_url":"https://codeload.github.com/minisuperfiles/MSFmultiSelect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253948328,"owners_count":21988953,"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":["array-msfmultiselect","easy-to-use","javascript","minisuperfiles","multiselect","pure-javascript","without-jquery"],"created_at":"2025-05-13T12:54:47.752Z","updated_at":"2025-05-13T12:54:48.563Z","avatar_url":"https://github.com/minisuperfiles.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MSFmultiSelect\n\nMSFmultiSelect (multiselect) is a pure JavaScript user-friendly multiselect library, don't need jQuery. It's very easy to use for developers and fast.\n\n### [Documentation (Demo)](https://minisuperfiles.blogspot.com/p/documentation.html?project=msfmultiselect) | [Try it (JSFiddle)](https://jsfiddle.net/minisuperfiles/r0L2yusd/) | [Download](https://github.com/minisuperfiles/MSFmultiSelect/archive/2.4.zip)\n\n## Installation\n\nUse npm to install the latest version.\n\n```\nnpm i msfmultiselect\n```\n\nImport MSFmultiSelect and its stylesheet.\n\n```javascript\nimport MSFmultiSelect from \"msfmultiselect\";\nimport \"msfmultiselect/msfmultiselect.min.css\";\n```\n\n\u003c!--Import MSFmultiSelect in angular and Typescript.\n\n```typescript\nimport { MSFmultiSelect } from \"msfmultiselect\";\n```\n\nExample in angular\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { MSFmultiSelect } from \"msfmultiselect\";\n@Component({\n  selector: \"app-generate-key\",\n  template: `\u003cdiv id=\"myselect\"\u003e\n    \u003cselect id=\"multiselect\" name=\"languages[]\" multiple=\"multiple\"\u003e\n      \u003coption value=\"1\" selected\u003eHTML\u003c/option\u003e\n      \u003coption value=\"2\" selected\u003eCSS\u003c/option\u003e\n      \u003coption value=\"3\"\u003eMySql\u003c/option\u003e\n      \u003coption value=\"4\"\u003eXML\u003c/option\u003e\n      \u003coption value=\"5\"\u003eJSON\u003c/option\u003e\n      \u003coption value=\"6\"\u003eYAML\u003c/option\u003e\n      \u003coption value=\"7\"\u003eMongoDB\u003c/option\u003e\n      \u003coption value=\"8\"\u003eSQLite\u003c/option\u003e\n    \u003c/select\u003e\n  \u003c/div\u003e`,\n  styleUrls: [\"./app.component.sass\", \"/msfmultiselect/msfmultiselect.css\"],\n})\nexport class AppComponent implements OnInit {\n  select: MSFmultiSelect;\n  constructor() {}\n  ngOnInit(): void {\n    this.select = new MSFmultiSelect(document.querySelector(\"#multiselect\"), {\n      selectAll: true,\n      searchBox: true,\n      onChange: this.onChange,\n    });\n  }\n  onChange(checked, value, instance) {\n    console.log(checked, value, instance);\n  }\n}\n```--\u003e\n\nAlternatively, you can simply embed it in your HTML file.\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/minisuperfiles/MSFmultiSelect/msfmultiselect.min.js\"\u003e\u003c/script\u003e\n\u003clink\n  href=\"https://cdn.jsdelivr.net/gh/minisuperfiles/MSFmultiSelect/msfmultiselect.min.css\"\n  rel=\"stylesheet\"\n/\u003e\n```\n\n## Using Example\n\nAdd references to MSFmultiSelect’s JavaScript and Stylesheet.\n\n```html\n\u003cscript src=\"msfmultiselect.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"msfmultiselect.css\" /\u003e\n```\n\nSelect box container element.\n\n```html\n\u003cdiv id=\"myselect\"\u003e\n  \u003cselect id=\"multiselect\" name=\"languages[]\" multiple=\"multiple\"\u003e\n    \u003coption value=\"1\" selected\u003eHTML\u003c/option\u003e\n    \u003coption value=\"2\" selected\u003eCSS\u003c/option\u003e\n    \u003coption value=\"3\"\u003eMySql\u003c/option\u003e\n    \u003coption value=\"4\"\u003eXML\u003c/option\u003e\n    \u003coption value=\"5\"\u003eJSON\u003c/option\u003e\n    \u003coption value=\"6\"\u003eYAML\u003c/option\u003e\n    \u003coption value=\"7\"\u003eMongoDB\u003c/option\u003e\n    \u003coption value=\"8\"\u003eSQLite\u003c/option\u003e\n  \u003c/select\u003e\n\u003c/div\u003e\n```\n\nJavaScript code\n\n```javascript\nvar select = new MSFmultiSelect(document.querySelector(\"#multiselect\"), {\n  selectAll: true,\n  searchBox: true,\n  onChange: function (checked, value, instance) {\n    console.log(checked, value, instance);\n  },\n});\n```\n\n## Syntax (arguments)\n\n```\nnew MSFmultiSelect(element)\nnew MSFmultiSelect(element, settings)\n\nelement = document.getElementById('multiselect')\nsettings = {\n  width: 350,\n  height: 40,\n  className: 'myclass',\n  onChange: function(checked, value, instance) {\n    console.log(checked, value, instance);\n  },\n  selectAll: true,\n  searchBox: true,\n  appendTo: '#myselect',\n  readOnly: true,\n  afterSelectAll: function(checked, values, instance) {\n    console.log(checked, values, instance);\n  },\n  autoHide: false\n}\n```\n\n### element\n\nGive DOM select element, this element posted in your backend.\n\n### settings (Optional)\n\nGive the object of settings your multiselect.\n\n\u003col type=\"1\"\u003e\u003cli\u003e\u003cb\u003eappendTo\u003c/b\u003e : give element selector string, it uses to target place to create multiselect.\u003c/li\u003e\n\u003cli\u003e\u003cb\u003ewidth\u003c/b\u003e : It is control of the mulitiselect width.\u003c/li\u003e\n  \u003cli\u003e\u003cb\u003eheight\u003c/b\u003e :  It is control of the mulitiselect height.\u003c/li\u003e\n  \u003cli\u003e\u003cb\u003eclassName\u003c/b\u003e : if you need any custom style, give css class name, it will apply to mulitiselect.\u003c/li\u003e\n  \u003cli\u003e\u003cb\u003eonChange\u003c/b\u003e : When multiselect is changed this callback function will run. In this function, there are three parameters.\u003col type=\"i\"\u003e\u003cli\u003e\u003cb\u003echecked\u003c/b\u003e : you receive boolean data, selected item checked, or unchecked.\u003c/li\u003e\n  \u003cli\u003e\u003cb\u003evalue\u003c/b\u003e : You get selected item value.\u003c/li\u003e\n  \u003cli\u003e\u003cb\u003einstance\u003c/b\u003e : It's instance variable of mulitiselect, you can access multiselect properties and methods\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\n  \u003cli\u003e\u003cb\u003eselectAll\u003c/b\u003e : If your given value is true, then the select-all feature is will enable. It helps one click to select all options\u003c/li\u003e\n  \u003cli\u003e\u003cb\u003eafterSelectAll\u003c/b\u003e : When users click the select-all feature this callback function will run. In this function, there are three parameters.\u003col type=\"i\"\u003e\u003cli\u003e\u003cb\u003echecked\u003c/b\u003e : you receive boolean data, selected item checked, or unchecked.\u003c/li\u003e\n  \u003cli\u003e\u003cb\u003evalues\u003c/b\u003e : You get selected item values in array.\u003c/li\u003e\n  \u003cli\u003e\u003cb\u003einstance\u003c/b\u003e : It's instance variable of mulitiselect, you can access multiselect properties and methods\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\n  \u003cli\u003e\u003cb\u003esearchBox\u003c/b\u003e : If your given value is true, the search box feature is will enable. It helps to search the option values.\u003c/li\u003e\n  \u003cli\u003e\u003cb\u003etheme\u003c/b\u003e : There are two themes available. They are theme1 and theme2. theme1 is a regular multi-select, theme2 multi-select have directly remove selected value option button.\u003c/li\u003e\n  \u003cli\u003e\u003cb\u003eautoHide\u003c/b\u003e : If your given value is false, selectable values always displayed on the screen.\u003c/li\u003e\u003c/ol\u003e\n\u003ch5\u003eMSFmultiSelect Methods\u003c/h5\u003e\u003cdl\u003e\n  \u003cdt\u003e\u003ccode\u003eMSFmultiSelect.setValue(sellectedValues, changeTrigger)\u003c/code\u003e\u003c/dt\u003e\n\u003cdd\u003eThis method is used to add selected values, this method needs two arguments, sellectedValues argument value has select option values in an array format. If you changeTrigger argument value is true then it triggers to onChange event.\u003cul\u003e\n\u003cli\u003e\u003cb\u003ecode\u003c/b\u003e : \u003ccode\u003eselect.setValue(['4','8']); //give select option values in array\u003c/code\u003e\u003c/li\u003e\u003c/ul\u003e\u003c/dd\u003e\n\u003cdt\u003e\u003ccode\u003eMSFmultiSelect.removeValue(removeSellectedValues, changeTrigger)\u003c/code\u003e\u003c/dt\u003e\n  \u003cdd\u003eThis method is used to remove selected values, this method needs two arguments, removeSellectedValues argument value has select option values in an array format. If you changeTrigger argument value is true then it triggers to onChange event.\u003cul\u003e\n\u003cli\u003e\u003cb\u003ecode\u003c/b\u003e : \u003ccode\u003eselect.removeValue(['4','8']); //give select option values in array\u003c/code\u003e\u003c/li\u003e\u003c/dd\u003e\n\u003cdt\u003e\u003ccode\u003eMSFmultiSelect.getData()\u003c/code\u003e\u003c/dt\u003e\n  \u003cdd\u003eThis methods use to get selected values of mulitiselect\u003cul\u003e\n\u003cli\u003e\u003cb\u003ecode\u003c/b\u003e : \u003ccode\u003e console.log(select.getData());\u003c/code\u003e\u003c/li\u003e\u003c/ul\u003e\u003c/dd\u003e\n\u003cdt\u003e\u003ccode\u003eMSFmultiSelect.selectAll(ctrlSwitch)\u003c/code\u003e\u003c/dt\u003e\n  \u003cdd\u003eThis method uses to select all option in the multiselect list or unselect all option in the list, this method needs one argument and its boolean value, if give true, select all option in multiselect list or you give false value unselect all in multiselect list.\u003cul\u003e\n\u003cli\u003e\u003cb\u003ecode\u003c/b\u003e : \u003ccode\u003e select.selectAll(true); select.selectAll(false);\u003c/code\u003e\u003c/li\u003e\u003c/ul\u003e\u003c/dd\u003e\n  \u003cdt\u003e\u003ccode\u003eMSFmultiSelect.loadSource(options)\u003c/code\u003e\u003c/dt\u003e\n  \u003cdd\u003eThis method uses to load options in multiselect. This method needs one argument and its need array format.\u003cul\u003e\n\u003cli\u003e\u003cb\u003eformet\u003c/b\u003e : \n\u003cpre\u003e\u003ccode\u003evar options = [\n    {caption:'optiontext1', value:'optionvalue1', selected:true},\n    {caption:'optiontext2', value:'optionvalue2', selected:false}\n];\u003c/code\u003e\u003c/pre\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\u003c/dd\u003e\u003cdt\u003e\u003ccode\u003eMSFmultiSelect.getSource()\u003c/code\u003e\u003c/dt\u003e\n\u003cdd\u003eThis method uses to get current source data, it will return the array format.\u003cul\u003e\n\u003cli\u003e\u003cb\u003ecode\u003c/b\u003e : \u003ccode\u003e console.log(select.getSource());\u003c/code\u003e\u003c/li\u003e\u003c/ul\u003e\u003c/dd\u003e\u003cdt\u003e\u003ccode\u003eMSFmultiSelect.reload()\u003c/code\u003e\u003c/dt\u003e\u003cdd\u003eThis use to recreate the mulitselect.\u003cul\u003e\n\u003cli\u003e\u003cb\u003ecode\u003c/b\u003e : \u003ccode\u003eselect.reload();\u003c/code\u003e\u003c/li\u003e\u003c/ul\u003e\u003c/dd\u003e\u003c/dl\u003e\n\nLearn more about in [minisuperfiles.blogspot.com](https://minisuperfiles.blogspot.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminisuperfiles%2Fmsfmultiselect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fminisuperfiles%2Fmsfmultiselect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminisuperfiles%2Fmsfmultiselect/lists"}