Filtering data attributes with different inputs

Question

Upon this code from @JokerDan

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)
);

The fiddle url is : Fiddle

What if I want the result hidden and show only after selecting .

Answer 1

If I understand you want to show only result when typing or selecting in drop downs , So I've hided the p class at start then added some values to input ,

See below snippet :

 $("p").hide(); $('#filterDiv').on("change keyup", function() { $val0 = $('#0').val().trim(); $val1 = $('#1').val().trim(); $val2 = $('#2').val().trim(); if($val0 == "" && $val1 == "-" && $val2 =="-") { $("p").hide() return; } chkBox = { datatest: null }; if ($('#3').is(':checked')) { chkBox.datatest = "1"; } else { chkBox.datatest = ""; } $("p").hide().filter(function() { var rtnData = ""; regExName = new RegExp($val0, "ig"); regExA = new RegExp($val1 == "-" ? "" : $val1, "ig"); regExB = new RegExp($val2 == "-" ? "" : $val2, "ig"); regExTest = new RegExp(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(); }); 

 .mySel { width: 100px; padding: 10px; } .myInput { width: 150px; padding: 10px; margin-bottom: 5px; } p { padding: 30px; background-color: #ffb3b3; color: white; font-weight: 700; } .a { border: 4px solid blue; } .b { border: 4px solid #e5e600 } .c { border: 4px solid #00b36b } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="status"></div> <div id="filterDiv"> <input type="text" class="myInput" id="0"/> <select class="mySel" id="1"> <option value="-"></option> <option value="">All</option> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> </select> <select class="mySel" id="2"> <option value="-"></option> <option value="">All</option> <option value="123">123</option> <option value="231">231</option> <option value="321">321</option> </select> <input type="checkbox" id="3"> Test Data :: 1 | 0 | NULL </div> <p class="pa 123" data-name="apple" data-a="a" data-b="123" data-test="1">Apple A 123 1</p> <p class="pb 123" data-name="banana" data-a="b" data-b="123" data-test="0">Banana B 123 0</p> <p class="pc 321" data-name="cherry" data-a="c" data-b="321" data-test="">Cherry C 321 X</p> <p class="pa 321" data-name="date" data-a="a" data-b="321" data-test=""> Date A 321 X</p> <p class="pa 123" data-name="elderberry" data-a="a" data-b="123" data-test="1">Elderberry A 123 0</p> <p class="pc 231" data-name="fig" data-a="c" data-b="231" data-test="1">Fig C 231 0</p>