javascript - 在 select2 中标记新标签？

Question

我正在使用select2，

我已经设置好了，所以如果它不存在，我可以添加一个新标签，

我也在使用 twitter 引导程序，如果标签不存在，我想将其标记为新标签，为此我在文本前面加上'<span class="label label-important">New</span> 'this 作为我的 select2 初始化程序。

$('#newVideoCategory').select2({
        placeholder: 'Select a category...',
        data: categories,
        createSearchChoice: function (term, data) {
            if ($(data).filter(function () {
                return this.text.localeCompare(term) === 0;
            }).length === 0) {
                return {id: term, text: '<span class="label label-important">New</span> ' + term};
            }
        },
        initSelection: function (element, callback) {
            $(categories).each(function () {
                if (this.id == element.val()) {
                    callback(this);
                    return;
                }
            })
        }
    })

现在这很好用

除非我为标签输入的内容作为该标签的标记的一部分存在

根据我收集到的内容，我需要覆盖formatResult、formatSelection或matcher.

这就是我从文档中得到的，但我不明白我需要如何改变它。

Answer 1

感谢您发布（并回答）问题！我想我找到了一种更简单的方法来解决这个问题：

...
createSearchChoice:function(term, data) {
    if ($(data).filter(function() {
        return this.text.localeCompare(term) === 0;
    }).length === 0) {
        return {id:term, text: term, isNew: true};
    }
},
formatResult: function(term) {
    if (term.isNew) {
        return '<span class="label label-important">New</span> ' + term.text;
    }
    else {
        return term.text;
    }
},
...

您可以从createSearchChoice()函数返回任何对象，因此只需添加一个字段，告知formatResult()它是一个新项目。

这样，返回项目的文本就是你想要的文本，而且formatResult()简单很多。

Answer 2

啊，通过覆盖formatResult函数得到它。

基本上我们所做的是检查第一个字符是否是我们newTagMark的，然后我们将其删除，应用匹配逻辑，然后再次将其添加到前面以将其吐出。

大部分逻辑实际上只是对select2内部markMatch函数的复制和粘贴。

var newTagMark = '<span class="label label-important">New</span> ';

$('#newVideoCategory').select2({
    placeholder: 'Select a category...',
    data: categories,
    createSearchChoice: function (term, data) {
        if ($(data).filter(function () {
            return this.text.localeCompare(term) === 0;
        }).length === 0) {
            return {id: term, text: newTagMark + term};
        }
    },
    initSelection: function (element, callback) {
        $(categories).each(function () {
            if (this.id == element.val()) {
                callback(this);
                return;
            }
        })
    },
    formatResult: function(result, container, query) {
        var text = result.text;
        var term = query.term;
        var markup=[];
        var marked = false;
        if(text.substr(0, newTagMark.length) == newTagMark){
            text = text.substr(newTagMark.length);
            markup.push(newTagMark);
        }

        var match=text.toUpperCase().indexOf(term.toUpperCase()),
                tl=term.length;
        if (match<0) {
            markup.push(text);
            return;
        }

        markup.push(text.substring(0, match));
        markup.push("<span class='select2-match'>");
        markup.push(text.substring(match, match + tl));
        markup.push("</span>");
        markup.push(text.substring(match + tl, text.length));
        return markup.join("");
    }
});

Answer 3

包括匹配标记的解决方案如下：

...
createSearchChoice:function(term, data) {
    if ($(data).filter(function() {
        return this.text.localeCompare(term) === 0;
    }).length === 0) {
        return {id:term, text: term, isNew: true};
    }
},
formatResult: function (result, container, query, escapeMarkup) {
    var markup=[];
    window.Select2.util.markMatch(this.text(result), query.term, markup, escapeMarkup);
    var text = markup.join("");
    if (result.isNew) {
        text = '<span class="label label-important">NEW</span> ' + text;
    }
    return text;
},
...