Javascript 选择2：禁用区分大小写的匹配

我试图在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;
            }
        });

---

这里有一个JSFIDLE:

问题是，当您应该在

createTag

方法中运行比较时，您正在

matcher

方法中运行所有比较：

• 默认情况下，

  matcher

  不区分大小写，您不需要为此运行任何特殊代码。请注意，如果您删除该函数并键入“test”，建议将包括“test”（即使您使用小写字母T编写它，也会使用大写字母T）

• createTag

  指定将运行以建议创建新标记的操作文本框中的每次更改都会执行该命令，而不是在不匹配时执行

因此，解决办法是：

删除

匹配器

方法

将案例比较添加到

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
            };
        }
    }
});

您可以看到它在JSFIDLE的这个更新上运行：（键入“test”，您将看到该建议如何不针对该特定值显示）

---

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

问题是，您在

匹配器

方法中运行所有比较，而您应该在

createTag

方法中运行它们：

• 默认情况下，

  matcher

  不区分大小写，您不需要为此运行任何特殊代码。请注意，如果您删除该函数并键入“test”，建议将包括“test”（即使您使用小写字母T编写它，也会使用大写字母T）

• createTag

  指定将运行以建议创建新标记的操作文本框中的每次更改都会执行该命令，而不是在不匹配时执行

因此，解决办法是：

删除

匹配器

方法

将案例比较添加到

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
            };
        }
    }
});

您可以看到它在JSFIDLE的这个更新上运行：（键入“test”，您将看到该建议如何不针对该特定值显示）

---

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

对于远程数据源和

标记：true

，我执行了以下代码：

$（“选择器”）。选择2({
标签：是的，
createTag:function（$params）{
变量$term=$.trim（$params.term）；
如果（$term==''）{
返回null；
}
返回{
id:$任期，
案文：$任期，
newTag:true//添加其他参数
}
},
insertTag:函数（数据、标记）{
var$found=false；
$.each（数据、函数（索引、值）{
if（$.trim（tag.text）.toUpperCase（）==$.trim（value.text）.toUpperCase（））{
$found=true；
}
});
如果（！$found）数据。取消移位（标记）；
},
//..其他选择2选项包括远程选项
});对于远程数据源和
标记：true
，我执行了以下代码：


$（“选择器”）。选择2({
标签：是的，
createTag:function（$params）{
变量$term=$.trim（$params.term）；
如果（$term==''）{
返回null；
}
返回{
id:$任期，
案文：$任期，
newTag:true//添加其他参数
}
},
insertTag:函数（数据、标记）{
var$found=false；
$.each（数据、函数（索引、值）{
if（$.trim（tag.text）.toUpperCase（）==$.trim（value.text）.toUpperCase（））{
$found=true；
}
});
如果（！$found）数据。取消移位（标记）；
},
//..其他选择2选项包括远程选项
});
我还可以注意到，默认情况下，只有在
createTag
中返回的
id
与任何结果中的
id
不匹配时，才会显示标记。谢谢，这对我帮助很大@凯文布朗：一个很好的暗示，我会记住这一点。对于使用远程数据源的每个人：要创建案例不敏感搜索，请更改服务器端匹配算法以处理此案例不敏感。我可能还需要注意，默认情况下，只有在
createTag
中返回的
id
与任何结果。谢谢，这对我帮助很大@KevinBrown：一个很好的提示，我会记住。对于每个使用远程数据源的人：要创建案例无关搜索，请更改服务器端匹配算法以处理此案例无关搜索。