Multiple-Select-Vanilla

Live Demo

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

Installation

npm install multiple-select-vanilla

Basic Usage

1. from a native <select>

<select class="multiple-select full-width" data-test="select1">
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select>

and then initialize ms-select

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)

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

version 3.0

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

version 4.0

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

version 5.0

• 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:

// 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<CollectionData>
+ lazyData: (resolve, reject) => void

See the Example09 for details on dynamic locale loading.