标记它提交的ID而不是值或标签

Question

使用此插件https://github.com/aehlke/tag-顺便说一句，它非常酷。

问题：

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

当标记时，它选择值，它将以值attr的CSV格式将值添加到隐藏字段中。 我要它做ID，而不是有人知道怎么做？

Answer 1

这里有几件事。 通过将参数设置为下划线，您可以将分度符（而不是CSV）设置为任何值：

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

然后，您可以修改第197行的tag-it.js文件，使其使用ID属性。

更改：

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

成为

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

因此，假设您将隐藏字段修改为：

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

您可以像这样修改javascript以获取所需的输出：

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

Answer 2

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 seletced
        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);