select2:禁用区分大小写的匹配 [英] select2: Disable case-sensitive matches

问题描述

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

I'm trying to allow only one value within select2 library, no matter how it's written. For example if the value "Test" is in the data list, "test" should not be added again. I've searched for a while and also looked at the documentation, but I didn't solve this one.

        $("#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/

Here is one JSFiddle: https://jsfiddle.net/2sz0oj8m/

推荐答案

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

The issue is that you are running all the comparisons in the matcher method when you should be running them in the createTag method:

• 默认情况下，matcher不区分大小写，因此您无需运行任何特殊代码.请注意，如果删除该函数并键入"test"，则建议将包括"Test"(即使使用小写的t编写，也要使用大写的T).

• By default, matcher is case insensitive and you don't need to ran any special code for that. Notice that if you remove the function, and type "test", the suggestions will include "Test" (with a capital T even when you wrote it with a lower case t).

createTag指定将建议建议创建新标签的操作. 它随文本框中的每次更改执行(如此处指定)，如果没有匹配项，则不会.

createTag specifies the actions that will be run to suggest a new tag creation. It is executed with each change in the textbox (as specified here) and not when there is not a match.

因此解决方案是:

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

1. Remove the matcher method.
2. Add the case comparison to the createTag method.
3. Only return the new suggestion if no case-insensitive match was found.

结果将是这样的:

$("#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"，您将看到针对该特定值的建议不显示).

And you can see it running on this update of your JSFiddle: https://jsfiddle.net/2sz0oj8m/1/ (type "test" and you'll see how the suggestion doesn't show up for that particular value).

此解决方案与远程数据源不兼容，您可能希望存储最后一个值，或者直接检查ajax结果(如果存在标记).

This solution is not compatible with remote data source, you may want to store last values or directly check in ajax results if tag is existing.

这篇关于select2:禁用区分大小写的匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！