jQuery筛选搜索框仅支持部分字符匹配，完整匹配失效求助

问题现象 #

两个select下拉框的筛选功能正常，但搜索字段只能匹配部分字符——比如输入"ane"能找到"Jane Doe"，但输入"Jane"却没有匹配结果。

问题根源 #

1. 大小写不匹配：你把搜索词转成了小写searchTerm = $('#search-field').val().toLowerCase().trim()，但jQuery原生的:contains选择器是区分大小写的，页面里的文本是"Jane"（首字母大写），所以小写的"jane"用:contains根本匹配不到大写的"Jane"。
2. 无效的语法尝试：后面用\b（正则单词边界）和%（SQL通配符）的写法都是错的，:contains只接受纯文本，不支持这些特殊符号，所以这两步完全起不到作用。

修复方案 #

放弃原生:contains，改用filter()方法手动做不区分大小写的文本匹配，同时去掉那些无效的通配符尝试。

修正后的JS代码：

$(document).ready(function() {
  // 初始隐藏所有目标div
  $('.col.kontaktpersoner').hide();

  // 监听搜索框和下拉框的输入/变化事件
  $('#search-field, #departments, #locations').on('input change', function() {
    var searchTerm = $('#search-field').val().toLowerCase().trim();
    var department = $('#departments').val();
    var location = $('#locations').val();

    // 构建基础选择器
    var selector = '.col.kontaktpersoner';
    if (department) {
      selector += '.' + department;
    }
    if (location) {
      selector += '.' + location;
    }

    // 先筛选出符合部门/地点的div，再根据搜索词过滤
    var filteredDivs = $(selector).filter(function() {
      // 把元素内的文本转成小写，和搜索词对比
      return $(this).text().toLowerCase().includes(searchTerm);
    });

    // 显示筛选结果，隐藏其他div
    filteredDivs.show();
    $('.col.kontaktpersoner').not(filteredDivs).hide();
  });
});

修复说明 #

• 用$(this).text().toLowerCase().includes(searchTerm)代替:contains，实现了不区分大小写的包含匹配，不管输入"Jane"还是"jane"或者"ane"都能匹配到目标内容。
• 去掉了原来无效的\b和%尝试，简化了逻辑，同时保证了筛选的准确性。

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