如何让搜索栏name和sku两个输入框同时生效实现内容筛选

现有代码仅读取了name输入框的内容，未获取sku输入框的数值做匹配校验，也没有实现两个字段的联合筛选逻辑，所以无法达到预期效果。

仅需修改原JS逻辑即可，HTML无需改动：

jQuery($ => {
  $("#search-form").on('submit', e => {
    e.preventDefault();
    // 分别获取两个输入框的内容，去除首尾空格
    const nameVal = $('#search-name').val().trim();
    const skuVal = $('#search-sku').val().trim();

    $('.box').show().not(function() {
      const $box = $(this);
      // 校验name字段：输入了name关键词就匹配，没输入就直接通过校验
      const namePass = nameVal ? new RegExp(nameVal, 'gi').test($box.find('.name').text()) : true;
      // 校验sku字段：输入了sku关键词就匹配，没输入就直接通过校验
      const skuPass = skuVal ? new RegExp(skuVal, 'gi').test($box.find('.sku').text()) : true;
      // 两个校验都通过才保留展示
      return namePass && skuPass;
    }).hide();
  });
});

修改后支持所有常规筛选场景：

• 仅在name输入框输入关键词，只会匹配对应商品的name字段展示结果
• 仅在sku输入框输入关键词，只会匹配对应商品的sku字段展示结果
• 同时在两个输入框输入内容，会筛选出同时满足两个匹配条件的商品
• 两个输入框都留空点击搜索，会展示全部商品

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