av-multi-select
v0.3.5
Published
Tiny, dependency-free multi-select dropdown Web Component with a select-multiple enhancer.
Maintainers
akhilviswan01Readme
av-multi-select
A tiny, dependency-free, multi-select dropdown Web Component with search, select-all, and clear functionality.
Works with <x-multi-select> custom element or by enhancing an existing <select multiple> in plain JavaScript.
✨ Features
- Pure JavaScript — no framework required
- Progressive enhancement for
<select multiple> - Searchable dropdown
- Select all / clear buttons
- Chips display for selected items
- Keyboard accessible
- Option to hide native
<select>completely or keep it visible
📦 Installation
npm install av-multi-select
## How to use it
```html
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>av-multi-select Local Demo</title>
</head>
<body>
<select id="mySelect" multiple aria-label="Pick fruits" style="display:none;">
<option value="in" selected>India</option>
<option value="us">United States</option>
<option value="jp">Japan</option>
<option value="af" selected>Afghanistan</option>
<option value="uk">United Kingdom</option>
<option value="jd">Jordan</option>
<option value="indo">Indonasia</option>
<option value="uae">United arab emirates</option>
<option value="cn">China</option>
<option value="it">Italy</option>
<option value="fr">Framce</option>
<option value="gr">Germany</option>
<option value="isl">Isreal</option>
<option value="br">Brazil</option>
<option value="esp">Spain</option>
</select>
<script type="importmap">
{
"imports": {
"av-multi-select": "/node_modules/av-multi-select/dist/av-multi-select.esm.js"
}
}
</script>
<script type="module">
import 'av-multi-select';
import { createMultiSelect } from 'av-multi-select';
const ms = createMultiSelect(document.getElementById('mySelect'), {
placeholder: 'Choose countries'
});
ms.addEventListener('change', e => console.log('Selected:', e.detail));
</script>
</body>
</html>