如何实现Materialize Chips的大小写敏感重复标签拦截功能？

嘿，我来帮你搞定这个需求！默认情况下，Materialize的Chips组件只会阻止完全大小写一致的重复标签（比如两个一模一样的"abc"），但如果想实现「不管大小写，只要内容相同就不能添加」的效果（比如禁止同时存在"abc"和"ABC"），我们可以借助组件的onAdd回调来手动做校验。

实现思路 #

核心逻辑很简单：每次添加新标签时，把新标签的文本统一转成小写，然后和已有的所有标签文本的小写版本做对比——如果发现重复，就移除刚添加的这个标签，再给用户一个友好提示。

修改后的完整代码 #

<!-- 先引入必要的Materialize资源 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!-- Chips容器 -->
<div class="chips chips-placeholder"></div>

<script>
$(document).ready(function() {
  $('.chips-placeholder').material_chip({
    placeholder: 'Enter a tag',
    secondaryPlaceholder: '+Add more tags',
    // 标签添加完成后触发的回调函数
    onAdd: function(chipData) {
      // 把新标签的文本转成小写，用于统一对比
      const newChipLower = chipData.tag.toLowerCase();
      let hasDuplicate = false;

      // 遍历已有的所有标签，检查是否存在忽略大小写的重复
      $('.chips-placeholder .chip').each(function(index) {
        // 跳过刚添加的那个标签（它是最后一个，避免自己和自己对比）
        if (index === $('.chips-placeholder .chip').length - 1) return;
        
        const existingChipLower = $(this).find('span').text().toLowerCase();
        if (existingChipLower === newChipLower) {
          hasDuplicate = true;
          return false; // 找到重复就跳出循环，不用继续遍历了
        }
      });

      // 如果发现重复，移除刚添加的标签并提示用户
      if (hasDuplicate) {
        $('.chips-placeholder .chip').last().remove();
        // 用Materialize自带的toast组件给出提示，也可以换成你自己的提示方式
        M.toast({html: '这个标签已经存在啦（不区分大小写）'});
      }
    }
  });
});
</script>

关键细节说明 #

• onAdd是Materialize Chips提供的钩子函数，会在每次新标签成功添加后触发，刚好适合在这里做重复校验
• 统一转成小写对比，能确保"abc"、"ABC"、"AbC"这类大小写不同但内容一致的标签被识别为重复
• 遍历已有标签时跳过最后一个，因为它就是刚添加的标签，避免误判自己和自己重复
• 移除重复标签后用M.toast给用户反馈，能提升使用体验

这样就能实现你想要的「不管大小写，内容相同就不能添加」的效果啦！

内容的提问来源于stack exchange，提问作者Inchara Raveendra