javascript - select2 区分自由文本响应（标签：真）

Question

我在我的应用程序中使用 select2 的设置 tags: true

在下图中，单词单元格是一个新选项（即不是预填充的一组选择选项的一部分）。

我想知道人们如何实施更好的方法来区分选择中显示的单元格选项是新选项而不是当前选项？

我考虑过使用选项的自定义函数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
    }
}

得到类似的东西：

有没有人想出更好的东西？

标签： javascriptuser-interfaceselectjquery-select2

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>