Javascript JQuery筛选-按钮和搜索

我希望通过可点击按钮和“输入搜索”来过滤此表。我有一个按钮组，其中每个按钮都有一个onclick事件来过滤行，搜索通过keyup函数过滤行。每一个单独工作，但我希望他们一起工作

1.单击按钮（已过滤的行）

2.添加文本搜索（再次过滤可见行）

或者反之亦然，或者只是步骤1或步骤2

拨弄

var$rowsss=$（“#表tr:visible”）；
$（“#搜索”）.keyup（函数（）{
var val=$.trim（$（this.val（））.replace（/+/g'，）.toLowerCase（）；
$rowsss.show（）.filter（函数（））{
var text=$（this.text（）.replace（/\s+/g'，）.toLowerCase（）；
return！~text.indexOf（val）；
}).hide（）；
});
$（“#全部”）。单击（函数（）{
变量行=$（“#表”）.find（“tr”）.show（）；
});
$（“#绿色”）。单击（函数（）{
变量行=$（“#表”）.find（“tr”）.hide（）；
rows.filter（“：contains（'Green'）”）.show（）；
});
$（“#橙色”）。单击（函数（）{
变量行=$（“#表”）.find（“tr”）.hide（）；
rows.filter（“：contains（'Orange'）”）.show（）；
});
$（“#lemon”）。单击（函数（）{
变量行=$（“#表”）.find（“tr”）.hide（）；
rows.filter（“：contains（'Lemon'）”）.show（）；
});
正文{
填充：20px；
}
输入{
边缘底部：5px；
填充物：2个3个；
宽度：209px；
边缘顶部：5px；
}
运输署{
填充：4px；
边框：1px#CCC实心；
宽度：100px；
}
.按钮包装{
明确：两者皆有；
显示：内联块；
框大小：边框框；
利润率：0.1%；
}
.我的单选按钮{
位置：绝对位置；
左：-9999em；
顶部：-9999em；
}
.我的单选按钮+标签{
浮动：左；
填充物：5em 1em；
光标：指针；
边框：1px实心#28608f；
右边距：-1px；
颜色：#fff；
/*背景色：#428bca*/
背景颜色：蓝色；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：11px；
/*文本转换：大写*/
}
.我的单选按钮+标签：第一种类型{
边界半径：.7em 0.7em；
}
.我的单选按钮+标签：类型的最后一个{
边界半径：0.7em.7em0；
}
.我的单选按钮：选中+标签{
/*背景色：#3277b3*/
背景色：#ccc；
}

全部的
绿色
橙色
柠檬


苹果
绿色
苹果
蓝色
葡萄
绿色
橙色
橙色
柠檬
黑色
苹果
蓝色
苹果
绿色
葡萄
绿色
橙色
橙色
柠檬
黑色
苹果
绿色
葡萄
绿色
橙色
橙色
柠檬
黑色
现在输入此代码

处理退格/空字段
在搜索字段填充时处理单击按钮
如果单击“全部”，将清除搜索
天气相当干燥
如果将按钮的ID更改为与第二列相同，或者将第二列更改为具有小写ID作为属性，则可以取消titleCase函数


const count=（）=>{
$（“#count”）.text（$（“#table tbody tr:visible”）.length）；
};
const titleCase=val=>val.slice（0,1）.toUpperCase（）+val.slice（1）；
$（函数（）{
$（'#search'）。在（“输入”，函数（）上）{
const val=$（this.val（）.replace（+/g'）.trim（）.toLowerCase（）；
const but=titleCase（$（“.my单选按钮：选中”）.attr（“id”）；
如果（val==”&&but==“全部”）{
$（'#table tr'）.show（）；
计数（）；
返回；
}
$（'#table tr'）。每个（函数（）{
const found=$（this）.text（）.replace（/\s+/g'，）.toLowerCase（）.indexOf（val）！=-1；
let show=（但是==“All”&&found）| |（$（this）.filter（“：contains（“+but+”））。长度>0&&found）
$（此）.toggle（显示）；
})
计数（）
});
$（“.my单选按钮”）。在（“单击”，函数（）{
如果（this.id==“全部”）{
$（“#table tr”）.show（）；
$（'#search'）.val（“”；//单击“全部”后清除输入
}否则{
常量行=$（“#表”）.find（“tr”）.hide（）；
const val=滴定酶（this.id）；
rows.filter（“：contains（“+val+”））.show（）；
$（'#search'）。触发器（“输入”）；
}
计数（）；
});
计数（）；
$（“#总计”）.text（$（“#表格正文tr”）.length）；
}); // $（function（）{
正文{
填充：20px；
}
输入{
边缘底部：5px；
填充物：2个3个；
宽度：209px；
边缘顶部：5px；
}
运输署{
填充：4px；
边框：1px#CCC实心；
宽度：100px；
}
.按钮包装{
明确：两者皆有；
显示：内联块；
框大小：边框框；
利润率：0.1%；
}
.我的单选按钮{
位置：绝对位置；
左：-9999em；
顶部：-9999em；
}
.我的单选按钮+标签{
浮动：左；
填充物：5em 1em；
光标：指针；
边框：1px实心#28608f；
右边距：-1px；
颜色：#fff；
/*背景色：#428bca*/
背景颜色：蓝色；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：11px；
/*文本转换：大写*/
}
.我的单选按钮+标签：第一种类型{
边界半径：.7em 0.7em；
}
.我的单选按钮+标签：类型的最后一个{
边界半径：0.7em.7em0；
}
.我的单选按钮：选中+标签{
/*背景色：#3277b3*/
背景色：#ccc；
}

全部的
绿色
橙色
柠檬


/
苹果
绿色
苹果
蓝色
葡萄
绿色
橙色
橙色
柠檬
黑色
苹果
蓝色
苹果
绿色
葡萄
绿色
橙色
橙色
柠檬
黑色
苹果
绿色
葡萄
绿色
橙色
橙色
柠檬
黑色
仅编辑JavaScript:


var$rowsss=$（“#表tr:visible”）；
const$search=$（“#search”）；
让groupFilter='all'；
const searchAll=（）=>{
var val=$.trim（$search.val（））.replace（/+/g'，）.toLowerCase（）；
$rowsss.show（）.filter（fu）
<form class="filter-form" action="">
          <div class="input-field">
          <div class="accessories-display-subtitle"><h2>BRANDS</h2><div class="divider"></div></div>
          <div class="input-field-content">
            <div class="checkbox-div"><input type="checkbox" name="brand" value="raleigh" id="raleigh"><label for="raleigh">Raleigh</label></div>
            <div class="checkbox-div"><input type="checkbox" name="brand" value="focus" id="focus"><label for="focus">Focus</label></div>
            <div class="checkbox-div"><input type="checkbox" name="brand" value="felt" id="felt"><label for="felt">Felt</label></div>
            <div class="checkbox-div"><input type="checkbox" name="brand" value="specialized" id="specialized"><label for="specialized">Specialized</label></div>
            <div class="checkbox-div"><input type="checkbox" name="brand" value="trek" id="trek"><label for="trek">Trek</label></div>
            <div class="checkbox-div"><input type="checkbox" name="brand" value="pinarello" id="pinarello"><label for="pinarello">Pinarello</label></div>
            <div class="checkbox-div"><input type="checkbox" name="brand" value="bmc" id="bmc"><label for="bmc">BMC</label></div>
            <div class="checkbox-div"><input type="checkbox" name="brand" value="giant" id="giant"><label for="giant">Giant</label></div>
            <div class="checkbox-div"><input type="checkbox" name="brand" value="salsa" id="salsa"><label for="salsa">Salsa</label></div>
            <div class="checkbox-div"><input type="checkbox" name="brand" value="cannondale" id="cannondale"><label for="cannondale">Cannondale</label></div>
            <div class="checkbox-div"><input type="checkbox" name="brand" value="cervelo" id="cervelo"><label for="cervelo">Cervelo</label></div>
            <div class="checkbox-div"><input type="checkbox" name="brand" value="bianchi" id="bianchi"><label for="bianchi">Bianchi</label></div>
            <div class="checkbox-div"><input type="checkbox" name="brand" value="trinx" id="trinx"><label for="trinx">Trinx</label></div>
            <div class="checkbox-div"><input type="checkbox" name="brand" value="spanker" id="spanker"><label for="spanker">Spanker</label></div>
            </div>
            </div>
            <div class="input-field">
          <div class="accessories-display-subtitle"><h2>PRICE RANGE</h2><div class="divider"></div></div>
          <div class="input-field-content">
            <div class="checkbox-div"><input type="checkbox" name="price" value="6-7k" id="6-7k"><label for="6-7k">₱6000 - ₱7000</label></div>
            <div class="checkbox-div"><input type="checkbox" name="price" value="8-9k" id="8-9k"><label for="8-9k">₱8000 - ₱9000</label></div>
            <div class="checkbox-div"><input type="checkbox" name="price" value="10-20k" id="10-20k"><label for="10-20k">₱10000 - ₱95000</label></div>
            <div class="checkbox-div"><input type="checkbox" name="price" value="20-40k" id="20-40k"><label for="20-40k">₱95000 - ₱40000</label></div>
            <div class="checkbox-div"><input type="checkbox" name="price" value="40-60k" id="40-60k"><label for="40-60k">₱40000 - ₱60000</label></div>
            <div class="checkbox-div"><input type="checkbox" name="price" value="60-80k" id="60-80k"><label for="60-80k">₱60000 - ₱80000</label></div>
            <div class="checkbox-div"><input type="checkbox" name="price" value="80upk" id="80upk"><label for="80upk">₱80000 and higher</label></div>
            </div>
            </div>
            <div class="input-buttons">
              <input type="submit" value="Filter" name="filter">
              <input type="reset" value="Reset" name="reset">
            </div>
          </form>

<div class="flowers">
  <div class="flower" data-id="aloe" data-category="giant trinx">Aloe</div>
  <div class="flower" data-id="lavendar" data-category="purple green medium africa europe">Lavender</div>
  <div class="flower" data-id="stinging-nettle" data-category="green large africa europe asia">Stinging Nettle</div>
  <div class="flower" data-id="gorse" data-category="green yellow large europe">Gorse</div>
  <div class="flower" data-id="hemp" data-category="green large asia">Hemp</div>
  <div class="flower" data-id="titan-arum" data-category="purple other giant asia">Titan Arum</div>
  <div class="flower" data-id="golden-wattle" data-category="green yellow large australasia">Golden Wattle</div>
  <div class="flower" data-id="purple-prairie-clover" data-category="purple green other medium north-america">Purple Prairie Clover</div>
  <div class="flower" data-id="camellia" data-category="pink other large north-america">Camellia</div>
  <div class="flower" data-id="scarlet-carnation" data-category="red medium north-america">Scarlet Carnation</div>
  <div class="flower" data-id="indian-paintbrush" data-category="red medium north-america">Indian Paintbrush</div>
  <div class="flower" data-id="moss-verbena" data-category="purple other small south-america">Moss Verbena</div>
  <div class="flower" data-id="climbing-dayflower" data-category="blue tiny south-america">Climbing Dayflower</div>
  <div class="flower" data-id="antarctic-pearlwort" data-category="green yellow large antarctica">Antarctic Pearlwort</div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>var $filterCheckboxes = $('input[type="checkbox"]');

$filterCheckboxes.on('change', function() {

  var selectedFilters = {};

  $filterCheckboxes.filter(':checked').each(function() {

    if (!selectedFilters.hasOwnProperty(this.name)) {
      selectedFilters[this.name] = [];
    }

    selectedFilters[this.name].push(this.value);

  });

 
  var $filteredResults = $('.flower');


  $.each(selectedFilters, function(name, filterValues) {


    $filteredResults = $filteredResults.filter(function() {

      var matched = false,
        currentFilterValues = $(this).data('category').split(' ');

      $.each(currentFilterValues, function(_, currentFilterValue) {



        if ($.inArray(currentFilterValue, filterValues) != -1) {
          matched = true;
          return false;
        }
      });

      return matched;

    });
  });

  $('.flower').hide().filter($filteredResults).show();

});
</script>