使用不同输入过滤数据属性

Question

来自@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)
);

小提琴网址为：Fiddle

如果我希望隐藏结果并仅在选择后显示该内容。

Answer 1

如果我理解你想在输入或选择下拉时只显示结果，那么我在开始时隐藏了p类，然后在输入中添加了一些值，

见下面的代码：

$("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="p a 123" data-name="apple" data-a="a" data-b="123" data-test="1">Apple A 123 1</p>
<p class="p b 123" data-name="banana" data-a="b" data-b="123" data-test="0">Banana B 123 0</p>
<p class="p c 321" data-name="cherry" data-a="c" data-b="321" data-test="">Cherry C 321 X</p>
<p class="p a 321" data-name="date" data-a="a" data-b="321" data-test=""> Date A 321 X</p>
<p class="p a 123" data-name="elderberry" data-a="a" data-b="123" data-test="1">Elderberry A 123 0</p>
<p class="p c 231" data-name="fig" data-a="c" data-b="231" data-test="1">Fig C 231 0</p>