Single/Multiple Tag Selector Plugin With jQuery - tag_selector.js

tag_selector.js is a jQuery plugin used to dynamically generate tag selectors (as inline labels) that support both single and multiple selections.

Can be used as an alternative to the traditional checkbox and radio inputs.

How to use it:

1. Create a container in which you want to place the selectable tags.

<div id="example"></div>

2. Import jQuery library and the jQuery tag_selector.js plugin into the html file.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="tag_selector.js"></script>

3. Initialize the plugin and specify the labels/values in the data array.

$('#example').tag_selector({
  class_prefix: 'demo', 
  data: [
    {label: 'jQuery', value: 1}, 
    {label: 'Script', value: 2, selected: true}, 
    {label: 'Net', value: 3}
  ]
});

4. Style the tags in the CSS.

.demo_tag {
  display: inline-block;
  padding: 10px;
  text-align: center;
  background: #C0392B;
  margin: 2px;
  border-radius: 3px;
  cursor: pointer;
}

5. Enable/disable the multi select.

$('#example').tag_selector({
  class_prefix: 'demo', 
  data: [
    {label: 'jQuery', value: 1}, 
    {label: 'Script', value: 2, selected: true}, 
    {label: 'Net', value: 3}
  ],
  multi_select: true
});

6. Get the user selected values using the callback:

$('#example').tag_selector({
  class_prefix: 'demo', 
  data: [
    {label: 'jQuery', value: 1}, 
    {label: 'Script', value: 2, selected: true}, 
    {label: 'Net', value: 3}
  ],
  multi_select: true,
  callback: function(event_name, elem, parent){
    var info = $('#info');
    var text = '';
    text += '<p>single: selected: <br>';
    text += $('#example').data('selected') + '</p>';
    text += '<p>single: unselected: <br>';
    text += $('#example').data('unselected') + '</p>';
    info.html(text);
  }
});

---

This awesome jQuery plugin is developed by icandroid. For more Advanced Usages, please check the demo page or visit the official website.