You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We now have a fully working and official release including a [**Live demo**](https://ghiscoding.github.io/multiple-select-vanilla/) for displaying all available options/methods. You can also take a look at the "[Used by](#used-by)" section below to see real world applications taking advantage of this library.
12
-
13
-
## Description
14
-
Multiple-Select-Vanilla is a fork of the popular [Multiple-Select (jQuery)](https://github.com/wenzhixin/multiple-select) library (thanks to @wenzhixin for this great lib). This fork was based on its latest known version at the time, which was `v1.5.2`, but later updated to [`v1.6.0`](https://github.com/wenzhixin/multiple-select/releases/tag/1.6.0). The main difference from the original lib is that we dropped jQuery and we now use native code and this mean zero external dependency. We also added a few extra features which you can see in the list below ([Changes vs Original lib](#changes-vs-original-lib)).
15
-
16
-
This lib allows you to select multiple elements with checkboxes :).
17
-
18
-
To 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.
19
-
20
-
21
-
### Fully tested with [](https://playwright.dev/)
22
-
23
-
The [Live demo](https://ghiscoding.github.io/multiple-select-vanilla/) website is also used by [Playwright](https://playwright.dev/) for E2E testing of the library, all examples are covered with Playwright tests.
3
+
## Live Demo
4
+
Available [**Live demo**](https://ghiscoding.github.io/multiple-select-vanilla/) for displaying all available options/methods.
[The MIT License](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/LICENSE)
38
-
39
-
40
-
## Changes vs Original lib (`multiple-select`)
41
-
New Multiple-Select Options:
42
-
- dropped jQuery requirement and replaced necessary code with browser native code.
43
-
- written in TypeScript which also brings typings support
44
-
- add extra features:
45
-
-`autoAdjustDropHeight` will automatically adjust the drop (up/down) height by available space (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options30))
46
-
-`autoAdjustDropPosition` will find best position (top/bottom) by its available space (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options29))
47
-
-`autoAdjustDropWidthByTextSize` automatically set the drop width size from the widest list option width
48
-
-`dataTest` will add a `data-test` attribute on the `.ms-parent` and `.ms-drop` divs for easier E2E testing
49
-
-`useSelectOptionLabel` will use the `<option label="">` (from select option value) that can be used to display shorter text of selected options.
50
-
- example: will show "1,3" instead of "January,March" (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options31))
51
-
-`useSelectOptionLabelToHtml` similar to `useSelectOptionLabel` but also renders HTML.
52
-
-`renderOptionLabelAsHtml` will render selected options as HTML code (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options27))
53
-
-`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)).
54
-
-`showOkButton` to add an "OK" button at the end of the multiple select option list (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options25))
55
-
-`showSearchClear` show a clear button on the search filter input (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options34))
56
-
57
-
## CSP Compliance
58
-
The library is now CSP (Content Security Policy) compliant since `v0.6.0`, however there are some exceptions to be aware of. When using any html string as template (with `textTemplate`, `labelTemplate`, `renderOptionLabelAsHtml` or `useSelectOptionLabelToHtml`), you will not be fully compliant unless you return `TrustedHTML`. You can achieve this by using the `sanitizer` method in combo with [DOMPurify](https://github.com/cure53/DOMPurify) to return `TrustedHTML` as shown below and with that in place you will again be CSP compliant.
with this code in place, we can use the following CSP meta tag (which is what we use in the lib demo, ref: [index.html](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/demo/index.html#L7))
**Note** 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`.
82
-
83
-
### Installation / Structure
84
-
There are multiple ways to use the library
85
-
1.`dist/browser`: Standalone build which assigns `multipleSelect` on the `window.multipleSelect` object
86
-
- browser standalone means that you can simply load it with `<script></script>` and then `multipleSelect('#mySelect')`
87
-
- 2 builds are available CJS (`.cjs`) and ESM (`.js`) and for ESM you will need to load it with `<script type="module">`
88
-
2.`cjs`: to use as CommonJS with `require('multiple-select-vanilla')`
89
-
3.`esm`: to use as ESM with `import from 'multiple-select-vanilla'`
90
-
91
-
```
92
-
dist/
93
-
browser/
94
-
multiple-select.js # ESM build, use with: window.multipleSelect
95
-
multiple-select.cjs # CJS (CommonJS) build, use with: window.multipleSelect
96
-
cjs/
97
-
multiple-select.cjs # CJS (CommonJS), use with: require()
98
-
esm/
99
-
multiple-select.js # ESM, use with: import from
100
-
locales/
101
-
multiple-select-all-locales.cjs # all-in-1 locales as CJS
102
-
multiple-select-all-locales.js # all-in-1 locales as ESM
103
-
..
104
-
multiple-select-fr-FR.cjs # French locale as CJS
105
-
multiple-select-fr-FR.js # French locale as ESM
106
-
...
107
-
styles/ # CSS and SASS Stylings
108
-
css/
109
-
sass/
110
-
types/ # d.ts Type Definitions
111
-
```
112
-
113
-
### Used by
114
-
This fork was created mostly to drop jQuery, and is used by a few other libraries that I maintain:
[Pull Request](https://github.com/ghiscoding/multiple-select-vanilla/pulls) are welcome, feel free to contribute.
125
-
126
-
### Development / Contributions
127
-
128
-
If you wish to contribute to the project, please follow these steps:
129
-
130
-
**Note**: this project uses [pnpm workspaces](https://pnpm.io/workspaces), you can install pnpm by following their [installation](https://pnpm.io/installation) or simply run `npx pnpm` to run any of the pnpm scripts shown below:
0 commit comments