在Select2中创建标记时从数据库获取id

I have a select2 tagging control. When tag not exists, user can create tag. This tags are saved in database, but the problem is that I don't know how to set tag id returned for ajax success.

我有一个select2标记控件。当标签不存在时,用户可以创建标签。这个标签保存在数据库中,但问题是我不知道如何设置为ajax成功返回的标签id。

$tags.select2({
    placeholder: '- Select -',
    tags: true,
    tokenSeparators: [',', ' '],
    createTag: function (params) {
        if (params.term.trim() === '') {
            return null;
        }
        return {
            id: '', //How to get id here???
            text: params.term.toLowerCase(),
            newTag: true // add additional parameters
        }
    },
    //Ajax to get tags here ommited
});

$tags.on('select2:select', function (e) {
    if (e.params.data.newTag) {
        $.ajax({
            url: urlAddTag,
            type: 'POST',
            dataType: "json",
            data: { tag: e.params.data.text.toLowerCase() },
            success: function (response) {
                 e.params.data.id = response.id;
            },
            error: function (xhr, ajaxOptions, thrownError) {
                var msg = JSON.parse(xhr.responseText);
            }
        });
    }
});

In the ajax response I'm setting the id with which tag was stored in database, but I don't know how to pass to 'createTag' function.

在ajax响应中我设置了哪个标签存储在数据库中的id,但我不知道如何传递给'createTag'函数。

1 个解决方案

#1

I had some similar issue and I solved in the following way, I don't expect this adapts 100% to your case but it might give you an idea.

我有一些类似的问题,我通过以下方式解决,我不认为这会100%适应你的情况,但它可能会给你一个想法。

My flow works in this way:

我的流程以这种方式工作:

in the createTag, I just create some random id which will be sent to the API

在createTag中,我只创建一些随机ID,它将被发送到API

the API will ignore this id and just creates a new record using the text from the select2 component

API将忽略此ID,并使用select2组件中的文本创建新记录

the API returns the new id (and text) in the response

API返回响应中的新id(和文本)

in the callback you update the tags on select2 with the new ID you just got

在回调中,您使用刚刚获得的新ID更新select2上的标记

So for instance in your case:

例如在你的情况下:

createTag: function(params) {
  if (params.term.trim() === '') {
      return null;
  }
  return {
      id: 'new_attribute',
      isNew: true,
      text: params.term
  };
}

In the server callback I search through the tags in the control and update its ID with the one I get from the server:

在服务器回调中,我搜索控件中的标签,并使用从服务器获取的ID更新其ID:

$('<option/>').val(response.id).html(response.text).appendTo($tags); //create a new option with id + text returned by the server
var tags = $tags.val(); //get current values
var index = tags.indexOf('new_attribute'); //look for new_attribute
if (index !== -1) {
    tags[index] = response.id; //replace 'new_attribute' with id got from the server
}
$tags.val(tags).trigger('change'); //update select2

#1