基于data-pname属性的卡片搜索筛选大小写不匹配问题

嘿，我完全懂你遇到的这个小坑！字符串匹配默认的大小写敏感确实很容易让人头疼，咱们直接来搞定它：

问题根源 #

你当前的代码是直接用输入的原始值去匹配data-pname的属性值，而JavaScript的字符串对比默认是大小写敏感的——所以小写的"facebook"和大写开头的"Facebook"会被判定为不相等，自然匹配不到目标卡片。

修复方案 #

只需要把输入值和属性值都统一转成相同大小写（小写或大写都行），再做匹配就行。这里给你两种常用的简洁写法：

写法1：用each()遍历匹配 #

var addon_search = document.createElement('input');
$(addon_search).on('keyup', function() {
  var value = $(this).val().toLowerCase(); // 把输入值统一转小写
  $('[data-pname]').hide();
  
  // 输入为空时直接显示所有卡片，提前退出节省性能
  if (value.length < 1) {
    $('[data-pname]').show();
    return;
  }
  
  // 遍历所有卡片，转小写后做包含匹配
  $('[data-pname]').each(function() {
    var cardPname = $(this).attr('data-pname').toLowerCase();
    if (cardPname.includes(value)) {
      $(this).show();
    }
  });
});

写法2：用filter()更简洁高效 #

var addon_search = document.createElement('input');
$(addon_search).on('keyup', function() {
  var value = $(this).val().toLowerCase();
  var $allCards = $('[data-pname]');
  
  $allCards.hide();
  if (!value) {
    $allCards.show();
    return;
  }
  
  // 过滤出匹配的卡片并显示
  $allCards.filter(function() {
    return $(this).attr('data-pname').toLowerCase().includes(value);
  }).show();
});

关键细节说明 #

• 用.toLowerCase()（或.toUpperCase()）统一转换大小写，彻底消除大小写差异的影响；
• .includes()支持包含匹配（比如输入"mess"也能匹配"Messenger"），如果需要精确匹配，直接把.includes(value)改成=== value就行；
• 加入return语句提前退出逻辑，避免输入为空时做不必要的遍历，优化了性能。

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