select2成功获取新创建的标记id

Question

在select2中，我有AJAX加载的标签，如果在db中找不到该标签，则用户可以选择创建一个新标签。问题在于，新标签在select2框中作为术语而不是ID列出（要选择的内容-如果仅由于术语而不是ID用户想要更新，则当再次加载标签时，尤其会成为问题存储在数据库中）。成功添加术语后，如何使select2接收ID并提交ID（而不是标签名称/术语）呢？

$(document).ready(function() {
var lastResults = [];
$("#project_tags").select2({
    multiple: true,
    placeholder: "Please enter tags",
    tokenSeparators: [","],
    initSelection : function (element, callback) {
        var data = [];
        $(element.val().split(",")).each(function () {
            data.push({id: this, text: this});
        });
        callback(data);
    },
    ajax: {
        multiple: true,
        url: "framework/helpers/tags.php",
        dataType: "json",
        data: function(term) {
            return {
                term: term
            };
        },
        results: function(data) {
            return {
                results: data
            };
        }
    },
    createSearchChoice: function(term) {
        var text = term + (lastResults.some(function(r) {
            return r.text == term
        }) ? "" : " (new)");
        return {
            id: term,
            text: text
        };
    },
});
$('#project_tags').on("change", function(e) {
    if (e.added) {
        if (/ \(new\)$/.test(e.added.text)) {
            var response = confirm("Do you want to add the new tag " + e.added.id + "?");
            if (response == true) {
                alert("Will now send new tag to server: " + e.added.id);
                $.ajax({
                    url: 'framework/helpers/tags.php',
                    data: {
                        action: 'add',
                        term: e.added.id
                    },
                    success: function(data) {

                    },
                    error: function() {
                        alert("error");
                    }
                });
            } else {
                console.log("Removing the tag");
                var selectedTags = $("#project_tags").select2("val");
                var index = selectedTags.indexOf(e.added.id);
                selectedTags.splice(index, 1);
                if (selectedTags.length == 0) {
                    $("#project_tags").select2("val", "");
                } else {
                    $("#project_tags").select2("val", selectedTags);
                }
            }
        }
    }
});

}）;

继承人交换机的一部分

case 'add':
    if (isset($_GET['term'])) {
        $new_tag = escape($_GET['term']);
        if (Nemesis::insert('tags', 'tag_id, tag_content', "NULL, '{$new_tag}'")) {
            // we need to send back the ID for the newly created tag
            $search = Nemesis::select('tag_id', 'tags', "tag_content = '{$new_tag}'");
            list($tag_id) = $search->fetch_row();
            echo $tag_id;
        } else {
            echo 'Failure';
        }
        exit();
    }
    break;

更新：我做了一些挖掘工作，让我感到困惑的是，select2输入似乎没有存储标签/术语的关联ID（请参阅下文）。我知道我可以通过成功回调来更改属性，但是我不知道要更改什么！

Answer 1

如您所说，您可以替换该值，这就是我的解决方案所要做的。如果你搜索的Chrome元素督察，你会看到，波纹管的选择二场，id为输入project_tags的和height的1。

奇怪的是，Chrome的元素检查器没有向您显示输入的值，如下所示：

但是，您要做的console.log($("#project_tags").val())是输入具有值（如您在图像中看到的）。

因此，您只需在success函数内放置的ajax调用的函数内，用id替换新选项的文本即可$('#project_tags').on("change")。该ajax呼叫将类似于：

$.ajax({
    url: 'framework/helpers/tags.php',
    data: {
        action: 'add',
        term: e.added.id
    },
    success: function(tag_id) {
        var new_val = $("#project_tags")
                        .val()
                        .replace(e.added.id, tag_id);
        $("#project_tags").val(new_val);
    },
    error: function() {
        alert("error");
    }
});

请注意，此解决方案不是防弹的。例如，如果您有一个带有1选定值的标签，并且用户插入了文本1，这将引起问题。

也许更好的选择是替换最后一个逗号右边的所有内容。但是，如果允许用户使用逗号创建标签，即使这样做也可能会引起一些问题。

让我知道您是否需要更多信息。