select2区分自由文本响应（标签：true）

Question

我在我的应用中将select2与setting tags: true

一起使用

在下图中，单词 cells 是一个新选项（即不属于预填充的选择选项集）。

我想知道人们如何实现一种更好的方法来区分选择中显示的 cells 选项是一个新选项，而不是当前选项？

我已经考虑过通过对选项createTag和templateResult使用自定义功能来做到这一点

function templateResult(el) {
    return 'newTag' in el ? el.text + ' (new tag)' : el.text;
}

function createTag(params) {
    var term = $.trim(params.term);

    if (term === '') {
      return null;
    }

    return {
      id: term,
      text: term,
      newTag: true // add additional parameters
    }
}

得到类似的东西

有人能提出更好的建议吗？

Answer 1

足以更改您的 createTag ：

$(".js-example-tags").select2({
    tags: true,
    createTag: function (params) {
        var term = $.trim(params.term);

        if (term === '') {
            return null;
        }
        return {
            id: term,
            text: term + ' (new tag)',  // add text....
            newTag: true // add additional parameters
        }
    }
}).on('change', function(e) {
    $(this).next('.select2-container').find('li:contains(" (new tag)")').text(function(idx, txt) {
        return txt.replace(' (new tag)', '');
    })
});

.js-example-tags {
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>


<select class="form-control js-example-tags" multiple>
    <option selected="selected">orange</option>
    <option>white</option>
    <option>purple</option>
</select>