Jquery UI tag-it widget - what's the best way to disable entries?

Question

For the Jquery UI tag-it widget, I'd like to disable text input into the class="ui-widget-content ui-autocomplete-input" textbox which contains all the tags.

My purpose is to just allow certain people the ability to delete inappropriate tags, but not allow anybody to add tags (which are auto-generated).

Is the best thing for me to edit the tag-it .js file and add a disable="disable" for that field? If I do that, won't that prevent the contents of that field from being submitted? Or does that matter as long as the associated hidden field is submitted?

Or is there a better way of doing this (an overriding style?) without modifying the tag-it file itself?

Thanks,

doug

Answer 1

In tag-it.js I replaced this line:

this._tagInput = $('<input type="text"').addClass('ui-widget-content');

with this:

this._tagInput = $('<input type="text" readonly="readonly"/>').addClass('ui-widget-content');

adding the readonly="readonly" attribute. That had the desired effect of preventing input but still allowing users to delete inappropriate auto-generated tags.

Answer 2

I had the same question as original op. But as the question is 2 and a half years old, and tag-it version is changed. The accepted answer needs to be updated to the folowing in

tag-it.js around line 478:

from:

        if (this.options.readOnly){
            tag.addClass('tagit-choice-read-only');
        } 

To:

            if (this.options.readOnly){
            tag.addClass('tagit-choice-editable');
            // Button for removing the tag.
            var removeTagIcon = $('<span></span>')
                .addClass('ui-icon ui-icon-close');
            var removeTag = $('<a><span class="text-icon">\xd7</span></a>') // \xd7 is an X
                .addClass('tagit-close')
                .append(removeTagIcon)
                .click(function(e) {
                    // Removes a tag when the little 'x' is clicked.
                    that.removeTag(tag);
                });
            tag.append(removeTag);            
        }

Answer 3

This is under the documentation of git repository having the documentation, under the Properties section:

$("#myTags").data("ui-tagit").tagInput.addClass("fancy"); //Obviously if you want to do something with class...

This translates to the solution for this below, in my personal implementation style, and probably the only way I could get this to work:

 $("#myTags").data("ui-tagit").tagInput.prop('disabled' , true); 

This is if I understand your question correctly. Note: ReadOnly does not make the tags un-editable.

As far as going through the tags, you could use ..

var x = $("#myTags").tagit("assignedTags");

Make it as an input field, and that ensures its "singleFieldNode" meaning tags are , (comma) separated. That way you can parse through it (split for commas(,) into an object, or however you want to do it)

PS: To apply any of the snippets above, simply change to the "id" of the HTML element that contains TagIt, and your code would work correctly. JQuery TagIt v2.0