tagit: change the value of label

Question

I am using this jquery ui plugin https://github.com/aehlke/tag-it for tagging.

I create tag like this

$("#Input").tagit("createTag", "ABC");

What i want is add some text to the label based on the value. For example:

ABC-Normal

DEF-Member

 beforeTagAdded: function (event, ui) {
     var label = $('#Input').tagit('tagLabel', ui.tag);
     if (label == "ABC") {
        ...                   
     } else {

     }
 },

Answer 1

Here is a demo using preprocessTag

$('#Input').tagit({
  preprocessTag: function(val) {
    if (!val) {
      return '';
    } else if (val == 'ABC') {
      return 'ABC - Normal';
    } else if (val == 'DEF') {
      return 'DEF - Member';
    } else {
      return val;
    }
  }
});

$('#Input').tagit('createTag', 'ABC');
$('#Input').tagit('createTag', 'DEF');

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/gh/aehlke/tag-it/js/tag-it.min.js" type="text/javascript" charset="utf-8"></script>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<link href="https://cdn.jsdelivr.net/gh/aehlke/tag-it/css/jquery.tagit.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/gh/aehlke/tag-it/css/tagit.ui-zendesk.css" rel="stylesheet" type="text/css">


<ul id="Input">
  <li>Tag2</li>
</ul>