javascript - 选择 2 : Disable case-sensitive matches

Question

我试图在 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/

Answer 1

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

• 默认情况下，matcher 不区分大小写，您不需要为此运行任何特殊代码。请注意，如果您删除该函数并键入“test”，建议将包括“Test”(即使您用小写字母 t 编写它也是大写字母 T)。

• createTag 指定将运行以建议新标签创建的操作。 它在文本框中的每次更改时执行 ( as specified here )，而不是在没有匹配项时执行。

所以解决方案是:

1. 删除 matcher 方法。
2. 将大小写比较添加到 createTag 方法。
3. 只有在未找到不区分大小写的匹配项时才返回新建议。

结果是这样的:

$("#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/ (键入“测试”，您会看到该建议如何不针对该特定值显示)。

编辑:此解决方案与远程数据源不兼容，如果标签存在，您可能希望存储最后的值或直接检查 ajax 结果。