MultiSelectTag is a lightweight, closure-based JavaScript library that transforms a standard HTML <select multiple> element into a custom, tag-based multi-select widget.
- Search & Filter: Filter options dynamically as you type.
- Keyboard Navigation: Use arrow keys to navigate and the Enter key to select.
- Automatic Sync: All changes sync with the hidden
<select>element. - Public API: Helper methods
selectAll(),clearAll(), andgetSelectedTags(). - Multiple Instances: Each instance is independent and encapsulated.
Simply copy and paste the following css link and js script to your html file head and body.
<!-- head: below existing links -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/habibmhamadi/[email protected]/dist/css/multi-select-tag.min.css"><!-- End of <body> -->
<script src="https://cdn.jsdelivr.net/gh/habibmhamadi/[email protected]/dist/js/multi-select-tag.min.js"></script>Create a multiple select element with options. Preselected options (via the selected attribute) will be automatically loaded.
<select name="countries[]" id="countries" multiple>
<option value="1" selected>Afghanistan</option>
<option value="2" selected>Australia</option>
<option value="3">Germany</option>
<option value="4">Canada</option>
<option value="5">Russia</option>
</select>Pass the id of your select element and an optional configuration object to create an instance of the widget.
<script>
var tagSelector = new MultiSelectTag('countries', {
maxSelection: 5, // default unlimited.
required: true, // default false.
placeholder: 'Search tags', // default 'Search'.
onChange: function(selected) { // Callback when selection changes.
console.log('Selection changed:', selected);
}
});
</script>The library exposes a minimal public API:
tagSelector.selectAll(); // Select All Options
tagSelector.clearAll(); // Clear All Selections
tagSelector.getSelectedTags(); // Get Currently Selected TagsFor customization feel free to download the css file and apply your own styles inside the defined classes.
Report bugs and suggest feature in issue tracker. Feel free to Fork and send Pull Requests.
