jQuery搜索筛选仅显示2条匹配结果，如何设置可展示全部符合条件的项？

问题根因 #

你代码中搜索逻辑的问题出在正则表达式的g（全局匹配）修饰符上：

• 带g修饰符的RegExp实例调用test()方法时，会自动维护lastIndex属性记录上一次匹配的结束位置，下一次调用test()会从该位置开始匹配，而非从头检索新的字符串
• 你所有商品共用同一个正则实例，前两个匹配的商品会将lastIndex推高，后续商品的文本从该位置开始检索不到对应内容，就被误判为不匹配隐藏了

解决方案 #

直接去掉正则的g修饰符即可，你只需判断当前商品文本是否存在匹配项，不需要全局查找所有匹配结果，保留i（忽略大小写）修饰符就足够满足需求。

修改后的JS代码如下：

$(document).ready(function() {
  var $btns = $('.btn').click(function() {
    if (this.id == 'all') {
      $('#parent > div').fadeIn(450);
    } else {
      var $el = $('.' + this.id).fadeIn(450);
      $('#parent > div').not($el).hide();
    }
    $btns.removeClass('active');
    $(this).addClass('active');
  })

  var $search = $("#search").on('input', function() {
    $btns.removeClass('active');
    // 仅保留i修饰符，去掉g修饰符
    var matcher = new RegExp($(this).val(), 'i');
    $('.box').show().not(function() {
      return matcher.test($(this).find('.name, .sku').text())
    }).hide();
  })
})

修改后搜索Hot Dog即可展示所有名称或SKU匹配的商品。

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