User-friendly Option Selector In Pure JavaScript – Tag Selector

Preview:

Description:

Tag Selector is a tiny JavaScript library that transforms the select options into tag-style labels for better user experience.

How to use it:

Download and import the Tag Selector into your project.

# NPM
$ npm install tagselector --save

You can also include the Tag Selector’s files directly in the document.

<link rel="stylesheet" href="tagselector.css">
<script src="tagselector.js"></script>

Initialize the library by creating an new Tag Selector instance and specify the target select element:

<select id="demo">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

var myInstance = new TagSelector(document.getElementById('demo'));

Set the maximum number of options could be selected.

var myInstance = new TagSelector(document.getElementById('demo'),{
    max: 3
});

Callback functions available.

var myInstance = new TagSelector(document.getElementById('demo'),{
    onInit: false,
    onDestroy: false,
    onSelect: false,
    onDeselect: false
});