jquery - JQuery Tag It - Edit tags inline

Question

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" />

Answer 1

具有此功能的解决方案已发布在 GitHub 上。

这是一个允许您编辑标签的工作小提琴。

本质上你需要使用onTagClicked参数并给它一个自定义函数：

 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();
            }

现在，当您单击标签时，您将看到您可以对其进行编辑。