Question

我有一个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);
            }
        });
    }
});

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

Answer 1

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

我的流程就是这样：

在createTag中，我只是创建了一些随机ID，它将被发送到 API
API会忽略此ID，只使用。创建一个新记录来自select2组件的文本
API在响应中返回新的id（和文本）
在回调中，您使用新ID更新select2上的标签刚刚

例如在你的情况下：

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

在服务器回调中，我搜索控件中的标签，并使用我从服务器获取的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

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

1 个答案: