Tag it submit id not value or label

Question

using this plugin https://github.com/aehlke/tag-it its very cool by the way.

problem:

        <input type="hidden" name="tags" id="mySingleField" value="Apple, Orange" disabled="true">
        Tags:<br>
        <ul id="mytags"></ul>

<script type="text/javascript">
    $(document).ready(function () {
        $("#mytags").tagit({
            singleField: true,
            singleFieldNode: $('#mySingleField'),
            allowSpaces: true,
            minLength: 2,
            removeConfirmation: true,
            tagSource: function (request, response) {
                //console.log("1");
                $.ajax({
                    url: "../City/GetList",
                    data: { term: request.term },
                    dataType: "json",
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.label + " (" + item.id + ")",
                                value: item.value
                            }
                        }));
                    }
                });
            }
        });
    });



</script>

When tag it selects the values it adds values to the hidden field in CSV format in value attr. i want it to do ID instead anyone know how to ?

Answer 1

Change the tag-it.js file

Comment from line 264

// that.createTag(that._cleanedInput());

// The autocomplete doesn't close automatically when TAB is pressed.
// So let's ensure that it closes.
// that.tagInput.autocomplete('close');

around line 285

var autocompleteOptions = {
    select: function(event, ui) {
        that.createTag(ui.item);                        

Create a new function

assignedTagsData: function(){
    // Only to be used when singleField option is not seleted
    var tags = [];
    this.tagList.children('.tagit-choice').each(function() {
        tags.push($(this).data('tag_item_data') );
    });
    return tags;
}

that.createTag(ui.item);
    

Create tag

var tag = $('<li></li>')
    .data('tag_item_data',item) //add this line
    .addClass('tagit-choice ui-widget-content ui-state-default ui-corner-all')
    .addClass(additionalClass)
    .append(label);

Answer 2

A couple of things here. You can set the delimeter instead of a CSV to anything by setting the parameter as such say to an underscore:

$("#mytags").tagit({
  ...
  singleFieldDelimiter: '_',
  ...

Then you can modify the tag-it.js file on line 197 to say use the ID attribute.

Change:

var tags = node.val().split(this.options.singleFieldDelimiter);

To be

var tags = node.attr("id").split(this.options.singleFieldDelimiter);

So let's say that you modified the hidden field to be:

<input type="hidden" name="tags" class="mySingleField" id="Apple_Orange_Banana" value="Apple_Orange" disabled="true">

You would modify the javascript as such to get the desired output:

    $(document).ready(function () {
        $("#mytags").tagit({
            singleField: true,
            singleFieldNode: $('.mySingleField'),
            singleFieldDelimiter: '_',
            allowSpaces: true,
            minLength: 2,
            removeConfirmation: true,
            tagSource: function (request, response) {
                //console.log("1");
                $.ajax({
                    url: "../City/GetList",
                    data: { term: request.term },
                    dataType: "json",
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.label + " (" + item.id + ")",
                                value: item.value
                            }
                        }));
                    }
                });
            }
        });
   });