Jquery - Filtering Data Attributes With Multiple Filters Of Different Inputs

I am working on a project where by I want to use JQuery in order to filter on data variables embedded onto divs that are on the page, its sort of like a showcase in which the users

Solution 1:

So after half a day of playing with JSFiddle I managed to get it working as I wanted, using RegExp as @David Johnson had menntioned.

https://jsfiddle.net/JokerDan/tqv0ybbz/2/

Working HTML

<divclass="status"></div><divid="filterDiv"><inputtype="text"class="myInput"id="0"/><selectclass="mySel"id="1"><optionvalue="">All</option><optionvalue="a">A</option><optionvalue="b">B</option><optionvalue="c">C</option></select><selectclass="mySel"id="2"><optionvalue="">All</option><optionvalue="123">123</option><optionvalue="231">231</option><optionvalue="321">321</option></select><inputtype="checkbox"id="3"> Test Data :: 1 | 0 | NULL
</div><pclass="p a 123"data-name="apple"data-a="a"data-b="123"data-test="1">Apple A 123 1</p><pclass="p b 123"data-name="banana"data-a="b"data-b="123"data-test="0">Banana B 123 0</p><pclass="p c 321"data-name="cherry"data-a="c"data-b="321"data-test="">Cherry C 321 X</p><pclass="p a 321"data-name="date"data-a="a"data-b="321"data-test=""> Date A 321 X</p><pclass="p a 123"data-name="elderberry"data-a="a"data-b="123"data-test="1">Elderberry A 123 1</p><pclass="p c 231"data-name="fig"data-a="c"data-b="231"data-test="1">Fig C 231 1</p>

Working JS

$('#filterDiv').on("change keyup", function() {
  chkBox = { datatest: null };

  if ($('#3').is(':checked')) { chkBox.datatest = "1"; } else { chkBox.datatest = ""; }

  $("p").hide().filter(function() {
    var rtnData = "";

    regExName   = newRegExp($('#0').val().trim(), "ig");
    regExA          = newRegExp($('#1').val().trim(), "ig");
    regExB          = newRegExp($('#2').val().trim(), "ig");
    regExTest       = newRegExp(chkBox.datatest, "ig")

    rtnData = (
      $(this).attr("data-name").match(regExName) && 
      $(this).attr("data-a").match(regExA) && 
      $(this).attr("data-b").match(regExB) &&
      $(this).attr("data-test").match(regExTest)
    );

    //console.log(rtnData);return rtnData;
  }).show();
});

Solution 2:

Don't you just need to extend the condition like this:

freq = newRegExp($('#frequency').val().trim(), "ig"); 
dips= newRegExp($('#dispwitch').val().trim(), "ig");
clone= newRegExp($('#cloneable').val().trim(), "ig");

return $(this).data("remote-name").match(regExName) || $(this).data("remote-freq").match(freq) || $(this).data("remote-dips").match(dips) || $(this).data("remote-clone").match(clone)