{"id":16298967,"url":"https://github.com/ghiscoding/multiple-select-vanilla","last_synced_at":"2025-04-05T21:06:03.036Z","repository":{"id":72453810,"uuid":"587541213","full_name":"ghiscoding/multiple-select-vanilla","owner":"ghiscoding","description":"single and multiple select component written in native code","archived":false,"fork":false,"pushed_at":"2025-03-28T23:53:26.000Z","size":3947,"stargazers_count":44,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T20:03:24.164Z","etag":null,"topics":["checkboxes","multiple-choice","multiple-select","select","single-select","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://ghiscoding.github.io/multiple-select-vanilla/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ghiscoding.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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},"funding":{"github":"ghiscoding","ko_fi":"ghiscoding"}},"created_at":"2023-01-11T01:43:33.000Z","updated_at":"2025-03-28T23:53:31.000Z","dependencies_parsed_at":"2023-10-15T04:08:56.681Z","dependency_job_id":"8f842a2f-162d-4cf6-8b7b-485c9f2fc9ca","html_url":"https://github.com/ghiscoding/multiple-select-vanilla","commit_stats":{"total_commits":673,"total_committers":5,"mean_commits":134.6,"dds":"0.19613670133729566","last_synced_commit":"5d69d3cff9f87db75cba4edd44a2980e12b0ba8d"},"previous_names":[],"tags_count":77,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghiscoding%2Fmultiple-select-vanilla","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghiscoding%2Fmultiple-select-vanilla/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghiscoding%2Fmultiple-select-vanilla/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghiscoding%2Fmultiple-select-vanilla/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ghiscoding","download_url":"https://codeload.github.com/ghiscoding/multiple-select-vanilla/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247399871,"owners_count":20932876,"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":["checkboxes","multiple-choice","multiple-select","select","single-select","vanilla-javascript"],"created_at":"2024-10-10T20:46:08.369Z","updated_at":"2025-04-05T21:06:03.012Z","avatar_url":"https://github.com/ghiscoding.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ghiscoding","https://ko-fi.com/ghiscoding"],"categories":[],"sub_categories":[],"readme":"# Multiple-Select-Vanilla\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)\n[![Playwright](https://img.shields.io/badge/tested%20with-Playwright-45ba4b.svg?logo=playwright)](https://playwright.dev/)\n[![Actions Status](https://github.com/ghiscoding/multiple-select-vanilla/actions/workflows/main.yml/badge.svg)](https://github.com/ghiscoding/multiple-select-vanilla/actions)\n\n[![NPM downloads](https://img.shields.io/npm/dy/multiple-select-vanilla)](https://npmjs.org/package/multiple-select-vanilla)\n[![npm](https://img.shields.io/npm/v/multiple-select-vanilla.svg?logo=npm\u0026logoColor=fff\u0026label=npm)](https://www.npmjs.com/package/multiple-select-vanilla)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/multiple-select-vanilla?color=success\u0026label=gzip)](https://bundlephobia.com/result?p=multiple-select-vanilla)\n\n## Description\nMultiple-Select-Vanilla is a fork of the popular [Multiple-Select (jQuery)](https://github.com/wenzhixin/multiple-select) library (thanks to @wenzhixin for this great project). This fork was based on its latest known version at the time, which was `v1.5.2`, but later updated to [`v1.7.0`](https://github.com/wenzhixin/multiple-select/releases/tag/1.7.0). The main difference from the original lib is that we dropped jQuery in favor of native browser code and this mean zero external dependency. As a bonus, a few extra features were also added to the library and you can see them listed below [Changes vs Original lib](#changes-vs-original-lib-multiple-select).\n\nThis lib allows you to select multiple elements with checkboxes :).\n\nTo get started take a look at the [Live demo](https://ghiscoding.github.io/multiple-select-vanilla/) for all available options and methods that the library offers.\n\n## Demo\nTake a look at the [**Live demo**](https://ghiscoding.github.io/multiple-select-vanilla/) to see all available options/methods (there's a lot). \nYou can also take a look at the \"[Used by](#used-by)\" section below to see and try live real world Open Source projects taking advantage of this library.\n\n### Fully tested with [![Playwright](https://img.shields.io/badge/tested%20with-Playwright-45ba4b.svg?logo=playwright)](https://playwright.dev/)\n\nThe [Live demo](https://ghiscoding.github.io/multiple-select-vanilla/) website is also helpful to run a full suite of E2E tests by using [Playwright](https://playwright.dev/), all project examples have dedicated Playwright tests.\n\n## Installation\n\n[![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow.svg)](https:///pr.new/ghiscoding/multiple-select-vanilla)\n\n```sh\nnpm install multiple-select-vanilla\n```\n\n## Changelog\n\n[CHANGELOG](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/multiple-select-vanilla/CHANGELOG.md)\n\n## LICENSE\n\n[MIT License](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/LICENSE)\n\n\n## Changes vs Original lib (`multiple-select`)\nChanges and new options:\n- dropped jQuery requirement and rewrote with browser native code.\n- rewritten in TypeScript to also provide typings support (`d.ts`)\n- make the lib CSP compliant (see [CSP Compliance](#csp-compliance) section below)\n- add E2E tests, with Playwright, for all existing examples (over 65 of them)\n- revamped the UI in v3.x to give it a more Modern Look:\n  - improved CSS styling by using SVG icons (CSS/SASS variables are also availables)\n  - new Dark Mode\n  - replace tabIndex with a more intuitive navigation \u0026 highlight by using arrow keys (or mouse hover)\n  - show 3 different states on multiple selections (none \" \", partial \"-\" or all \"🗸\")\n- add extra options:\n  - `autoAdjustDropHeight` will automatically adjust the drop (up/down) height by available space (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options30))\n  - `autoAdjustDropPosition` will find best position (top/bottom) by its available space (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options29))\n  - `autoAdjustDropWidthByTextSize` automatically set the drop width size by reading the widest list option width\n  - `dataTest` will add a `data-test` attribute on the `.ms-parent` and `.ms-drop` divs for easier E2E testing\n  - `useSelectOptionLabel` will use the `\u003coption label=\"\"\u003e` which can be used to display shorter text of selected options.\n    - example: display \"1,3\" as label instead of \"January,March\" (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options31))\n  - `useSelectOptionLabelToHtml` similar to `useSelectOptionLabel` but also renders HTML.\n  - `renderOptionLabelAsHtml` will render selected options as HTML code (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options27))\n  - `sanitizer` can be used to sanitize HTML code and prevent XSS cross-site scripting attacks (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options32)).\n  - `showOkButton` adds an \"OK\" button at the end of the multiple select option list (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options25))\n  - `showSearchClear` show a clear filter button on the search filter input (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options34))\n  - `diacriticParser` custom parser to normalize diacritic symbols when filtering select list (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options35))\n  - `darkMode` to enable our new **Dark Mode** Theme (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options38))\n  - `infiniteScroll` option (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options36))\n  - `onFilterClear` callback that will be executed when the filter gets cleared (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/events))\n  - `onClose(reason)` callback that will be executed when the dropdown closes (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/events))\n\n## CSP Compliance\nThe library is now CSP (Content Security Policy) compliant, however there are some exceptions to be aware of. When using any HTML strings as template (when using `textTemplate`, `labelTemplate`, `renderOptionLabelAsHtml` or `useSelectOptionLabelToHtml`), you will not be fully compliant unless you return [`TrustedHTML`](https://developer.mozilla.org/en-US/docs/Web/API/TrustedHTML). You can achieve this by using the `sanitizer` method in combo with an external library like [DOMPurify](https://github.com/cure53/DOMPurify) (recommended) to return `TrustedHTML` as shown below and with that in place you will be CSP compliant.\n\n```typescript\nimport DOMPurify from 'dompurify';\nimport { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';\n\nconst ms1 = multipleSelect('#select1', {\n   name: 'my-select',\n   single: false,\n   useSelectOptionLabelToHtml: true,\n   sanitizer: (html) =\u003e DOMPurify.sanitize(html, { RETURN_TRUSTED_TYPE: true }), // return TrustedHTML Type\n   data: [\n      { text: '\u003ci class=\"fa fa-star\"\u003e\u003c/i\u003e January', value: 1 },\n      { text: '\u003ci class=\"fa fa-star\"\u003e\u003c/i\u003e February', value: 2 },\n   ]\n});\n```\nwith this code in place, we can now use the following CSP meta tag (which is what we use in the demo [index.html](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/demo/index.html#L7))\n```html\n\u003cmeta http-equiv=\"Content-Security-Policy\" content=\"default-src 'self';style-src 'self' data:; img-src * 'self' data: https:; require-trusted-types-for 'script'; trusted-types dompurify\"\u003e\n```\n\u003e **Note** that in our demo we are actually adding `unsafe-inline` simply because we are using Vite (which is not CSP compliant in Dev mode), but the library should work nonetheless without `unsafe-inline`.\n\n### Installation / Structure\nThere are multiple ways to install and use the library, you can see below the folder structure of the distribution files\n1. `dist/browser`: Standalone build which assigns `multipleSelect` on the `window.multipleSelect` object\n   - browser standalone means that you can simply load it with `\u003cscript\u003e\u003c/script\u003e` and then `multipleSelect('#mySelect')`\n   - 2 builds are available CJS (`.cjs`) and ESM (`.js`) and for the latter you will need to load it with `\u003cscript type=\"module\"\u003e`\n2. `cjs`: to use as CommonJS with `require('multiple-select-vanilla')`\n3. `esm`: to use as ESM with `import from 'multiple-select-vanilla'`\n\n```\ndist/\n  browser/\n    multiple-select.js              # ESM build, use with: window.multipleSelect\n    multiple-select.cjs             # CJS (CommonJS) build, use with: window.multipleSelect\n  locales/\n    multiple-select-all-locales.cjs # all-in-1 locales as CJS\n    multiple-select-all-locales.js  # all-in-1 locales as ESM\n    ..\n    multiple-select-fr-FR.cjs       # French locale as CJS\n    multiple-select-fr-FR.js        # French locale as ESM\n    ...\n  styles/                           # CSS and SASS Stylings\n    css/\n    sass/\n  index.d.ts                        # d.ts Type Definitions\n  multiple-select.cjs               # CJS (CommonJS), used by: require()\n  multiple-select.js                # ESM, used by: import from\n```\n\n### Used by\nThis fork was created mostly to drop jQuery, and it is used by a few other Open Source projects of mine that I also maintain:\n- [Angular-Slickgrid](https://github.com/ghiscoding/Angular-Slickgrid)\n- [Aurelia-Slickgrid](https://github.com/ghiscoding/aurelia-slickgrid)\n- [Slickgrid-React](https://github.com/ghiscoding/slickgrid-react)\n- [Slickgrid-Universal](https://github.com/ghiscoding/slickgrid-universal)\n\n## Contributions\n\n[![PR](https://img.shields.io/badge/PR-Welcome-1abc9c)](https://github.com/ghiscoding/multiple-select-vanilla/pulls)\n\n[Pull Request](https://github.com/ghiscoding/multiple-select-vanilla/pulls) are welcome, feel free to contribute.\n\n### Development / Contributions\n\nIf you wish to contribute to the project, please follow the steps shown below:\n\n**Note**: this project uses [pnpm workspaces](https://pnpm.io/workspaces), you can install pnpm by following their [installation](https://pnpm.io/installation) or use NodeJS `corepack enable` to run any of these pnpm scripts.\n\n1. clone the lib:\n   - `git clone https://github.com/ghiscoding/multiple-select-vanilla`\n2. install with **pnpm** from the root:\n   - `pnpm install` OR `npx pnpm install`\n3. run a full TypeScript build\n   - `pnpm run build` OR `npx pnpm run build`\n4. run in development mode (lib \u0026 demo)\n   - `pnpm run dev` OR `npx pnpm run dev`\n\n#### Pull Request Contribution\n\nBefore submitting a PR (pull request), please make sure that you followed the steps below for a better chance of a successfull PR:\n\n1. make sure that you have already executed `pnpm install`\n2. run the Biome lint npm script (or simply jump to step 4)\n   - `pnpm run biome:lint:write`\n3. run the Biome code formatting npm script (or simply jump to step 4)\n   - `pnpm run biome:format:write`\n4. run a full Build (this will also run Biome lint/format, so you could skip step 2)\n   - `pnpm run build`\n\n## Sponsors\n\n\u003cdiv\u003e\n  \u003cspan\u003e\n    \u003ca href=\"https://github.com/wundergraph\" class=\"Link\" title=\"Wundergraph\" target=\"_blank\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/64281914\" width=\"50\" height=\"50\" valign=\"middle\" /\u003e\u003c/a\u003e\n  \u003c/span\u003e\n  \u0026nbsp;\n  \u003cspan\u003e\n    \u003ca href=\"https://github.com/johnsoncodehk\" class=\"Link\" title=\"johnsoncodehk (Volar)\" target=\"_blank\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/16279759\" width=\"50\" height=\"50\" valign=\"middle\" /\u003e\u003c/a\u003e\n  \u003c/span\u003e\n   \u0026nbsp;\n  \u003cspan\u003e\n    \u003ca href=\"https://github.com/kevinburkett\" class=\"Link\" title=\"kevinburkett\" target=\"_blank\"\u003e\u003cimg class=\"circle avatar-user\" src=\"https://avatars.githubusercontent.com/u/48218815?s=52\u0026amp;v=4\" width=\"45\" height=\"45\" valign=\"middle\" /\u003e\u003c/a\u003e\n  \u003c/span\u003e\n  \u0026nbsp;\n  \u003cspan\u003e\n    \u003ca href=\"https://github.com/anton-gustafsson\" class=\"Link\" title=\"anton-gustafsson\" target=\"_blank\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/22906905?s=52\u0026v=4\" width=\"50\" height=\"50\" valign=\"middle\" /\u003e\u003c/a\u003e\n  \u003c/span\u003e\n  \u0026nbsp;\n  \u003cspan\u003e\n    \u003ca href=\"https://github.com/gibson552\" class=\"Link\" title=\"gibson552\" target=\"_blank\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/84058359?s=52\u0026v=4\" width=\"50\" height=\"50\" valign=\"middle\" /\u003e\u003c/a\u003e\n  \u003c/span\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghiscoding%2Fmultiple-select-vanilla","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fghiscoding%2Fmultiple-select-vanilla","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghiscoding%2Fmultiple-select-vanilla/lists"}