Multiple-Select-Vanilla

Live Demo

Available Live demo to see all available options/methods (there's a lot).

Installation

``sh
npm install multiple-select-vanilla
`

Basic Usage

#### 1. from a native

`html



First
Second
Third
Fourth

`

and then initialize ms-select

`ts
import { multipleSelect } from 'multiple-select-vanilla';

const ms = multipleSelect('.multiple-select');
`

#### 2. or from a data array of string/numbers or text/value pair (object array)

`ts
import { multipleSelect } from 'multiple-select-vanilla';

const ms = multipleSelect('.multiple-select', {
data: ['First', 'Second'] // native string/number/boolean
});

const ms = multipleSelect('.multiple-select', {
data: [
// text/value pair
{ text: 'First', value: 1 },
{ text: 'Second', value: 2 },
{ text: 'Third', value: 3 },
{ text: 'Fourth', value: 4 },
]
});
`

Changelog

CHANGELOG

LICENSE

MIT License

Major Changes

$3

- remove deprecated options
- new Modern Look by using SVG icons

$3

- build ESM-Only and drop CJS (CommonJS) build (aka require())

$3

- Locale management has been refactored to remove usage of the global window object. Locales are now provided via a modular registry and injected through options. The multiple-select- prefix has been removed from all locale import paths (single and merged) and no longer exists on the window object.

- Lazy loading API change: The lazyData option now uses a callback signature: lazyData(resolve, reject) instead of returning a Promise. This allows for more flexible async data loading and error handling. See the demo and documentation for updated usage examples.

Migration Example:

`diff
// 1. load every locale individually, it could be import in 2 ways (named import OR import on window object)
// named import
- import { Spanish } from 'multiple-select-vanilla/dist/locales/multiple-select-es-ES.js';
+ import { Spanish } from 'multiple-select-vanilla/dist/locales/es-ES.js';

// OR default import
- import 'multiple-select-vanilla/dist/locales/multiple-select-es-ES.js';
+ import Spanish from 'multiple-select-vanilla/dist/locales/es-ES.js';

// 2. or load all locales at once
- import 'multiple-select-vanilla/dist/locales/multiple-select-all-locales';
// named import
+ import { locales } from 'multiple-select-vanilla/dist/locales/all-locales.js';
// OR default import
+ import locales from 'multiple-select-vanilla/dist/locales/all-locales.js';

// 3. lazyData option (old vs new)
- lazyData: () => Promise
+ lazyData: (resolve, reject) => void
``

See the Example09 for details on dynamic locale loading.