CODEWITHSUNDEEP
jquerytag-it
Roshni Shah
Roshni Shah

Reputation: 309

JQuery Tag It - Edit tags inline

I have used jQuery tagit which will accept email addresses. I have validated tags for email format. I want to know if it can also edit the tags if user has typed something wrong. Right now we have to remove the tag and reenter if something goes wrong.

Thanks in Advance

 $("#singleFieldTags").tagit({
        singleField: true,
        singleFieldNode: $('#mySingleField'),
        beforeTagAdded: function (event, ui) {
            //email validation code
        }
    });


    <ul id="singleFieldTags"></ul>
     <input id="mySingleField" />

Upvotes: 4

Views: 826

Answers (1)

maxshuty
maxshuty

Reputation: 10662

A solution was posted on GitHub that has this functionality.

Here is a working fiddle that allows you to edit the tags.

Essentially you need to use the onTagClicked parameter and give it a custom function:

 onTagClicked: function(event, ui) {
                var elem = $(ui.tag);
                var input = $('<input type="text" id="replaceInput" value="'+ ui.tagLabel + '" />');
                temp = ui.tagLabel;
                input.bind('blur',function(){
                    var instance = $("#mySingleField").data("tagit");
                    $(this).closest('.tagit-label').empty().append($(this).val());
                    var oldValue = temp;
                    var tags = instance.assignedTags();

                    for(var i = 0;i < tags.length;i++){
                        if (tags[i] === oldValue){
                            tags[i] = $(this).val();
                        }
                    }
                    instance._updateSingleTagsField(tags);
                });                 
                elem.find('.tagit-label').empty().append(input);
                input.focus();
            }

Now when you click the tag you will see that you can edit it.

Upvotes: 1

Related Questions