javascript - select2:禁用区分大小写的匹配

我试图在select2库中仅允许一个值，无论它是如何编写的。例如，如果值“ Test”在数据列表中，则不应再次添加“ test”。我搜索了一会儿，也看了一下文档，但是我没有解决这个问题。

        $("#timezones").select2({
            tags: true,
            createTag: function (tag) {
                return {
                    id: tag.term,
                    text: tag.term + " (new)",
                    isNew: true
                };
            },
            matcher: function (term, data) {
                // `term.term` should be the term that is used for searching
                // `data.text` is the text that is displayed for the data object
                if ($.trim(term.term) === '') {
                    return data;
                }

                var termString = term.term.trim();
                var textString = data.text.trim();
                var termStringUpper;
                var textStringUpper;

                if (termString) termStringUpper = termString.toUpperCase();
                if (textString) textStringUpper = textString.toUpperCase();

                return termStringUpper == textStringUpper;
            }
        });

这是一个JSFiddle：https://jsfiddle.net/2sz0oj8m/

最佳答案

问题是，当您应该在matcher方法中运行它们时，您正在运行createTag方法中的所有比较：


默认情况下，matcher不区分大小写，您无需为此运行任何特殊代码。请注意，如果删除该函数，然后键入“ test”，则建议将包括“ Test”（即使使用小写的t编写，也要使用大写的T）。
createTag指定将建议建议创建新标签的操作。每次文本框（as specified here）中的更改都执行该命令，而不是没有匹配项时则不执行。


因此，解决方案是：


删除matcher方法。
将大小写比较添加到createTag方法。
如果未找到不区分大小写的匹配项，则仅返回新建议。


结果将是这样的：

$("#timezones").select2({
    tags: true,
    createTag: function (tag) {

        // Check if the option is already there
        var found = false;
        $("#timezones option").each(function() {
            if ($.trim(tag.term).toUpperCase() === $.trim($(this).text()).toUpperCase()) {
                found = true;
            }
        });

        // Show the suggestion only if a match was not found
        if (!found) {
            return {
                id: tag.term,
                text: tag.term + " (new)",
                isNew: true
            };
        }
    }
});

并且您可以看到它在JSFiddle的此更新上运行：https://jsfiddle.net/2sz0oj8m/1/（键入“ test”，您将看到针对该特定值的建议不显示）。

编辑：此解决方案与远程数据源不兼容，您可能想要存储最后一个值，或者直接检查ajax结果（如果存在标记）。