jQuery实现仅匹配h4标题的div区块实时搜索筛选

原脚本存在的硬伤 #

• 选择器与实际DOM不匹配：原脚本遍历.country-grid div，但当前页面结构中不存在.country-grid类元素，实际承载单个国家完整信息的区块类名为.country-box
• 匹配范围过大：原脚本取遍历元素的全量文本做正则匹配，会把区块内.country-info承载的币种、工作时长、税率等配套信息也纳入筛选范围，不符合只匹配标题的需求
• 逻辑错位：匹配失败时全局执行jQuery('.country-info').show()，会导致已被隐藏的父区块下的配套信息单独漏出显示

调整后实现逻辑 #

• 遍历对象替换为实际存在的国家区块.country-box
• 匹配源从全区块文本，调整为仅提取当前区块下.overlay-cls h4的标题文本做正则校验
• 移除错位的全局显示逻辑
• 增加输入值的首尾空格裁剪，避免无效输入影响匹配精度

调整后可直接运行的脚本 #

jQuery("#country_search").keyup(function() {
  const filter = jQuery(this).val().trim();
  jQuery('.country-box').each(function() {
    // 仅提取区块内overlay-cls下的h4标题做匹配
    const titleText = jQuery(this).find('.overlay-cls h4').text();
    if (titleText.search(new RegExp(filter, "i")) < 0) {
      jQuery(this).hide();
    } else {
      jQuery(this).show();
    }
  });
});

调整后效果 #

• 搜索筛选仅触发h4标题的匹配，不会因为区块内的工时、税率、币种等附属信息触发匹配结果
• 不会出现隐藏父区块后子元素单独漏出的显示异常
• 输入带前后空格时不会出现匹配失效的问题

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