Question

我想创建一个包含两个搜索框的应用程序。我将搜索关键字传递给第一个框，然后传递给第二个框。不幸的是，该应用程序没有保留第一次搜索。进入第二个框时，第一个搜索将被覆盖。

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
    pre, p{
        background-color:#987563;
    }
    .myInput{
        background-color: #1c1d22;
        color: white;
    article{
         background-color: #acac9a;
         padding: 2%;
         margin: 2%;
    }
</style>   
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myDIV *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });

$("#myInput1").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myDIV *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
</head>
<body>
<input id="myInput" type="text" placeholder="Search..">
<input id="myInput1" type="text" placeholder="Search..">
<section id="myDIV">
<h2> If I type "two" in the first searchbox and than "three" in second, the second searchbox overwrites the first.</h2> 
<p>one two     </p>   
<p>one three     </p>
</section>
</body>
</html>

是否可以保留第一次搜索的结果并在第一次搜索时进行第二次搜索？

Answer 1

使用类隐藏，具体取决于哪个搜索失败。

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = this.value.toLowerCase();
    
    $("#myDIV *").addClass('myInputMismatch').filter(function() {
      return this.innerHTML.toLowerCase().indexOf(value) > -1;
    }).removeClass('myInputMismatch');
  });

  $("#myInput1").on("keyup", function() {
    var value = this.value.toLowerCase();
    
    $("#myDIV *").addClass('myInput1Mismatch').filter(function() {
      return this.innerHTML.toLowerCase().indexOf(value) > -1;
    }).removeClass('myInput1Mismatch');
  });
});

pre,
p {
  background-color: #987563;
}

.myInput {
  background-color: #1c1d22;
  color: white;
}

article {
  background-color: #acac9a;
  padding: 2%;
  margin: 2%;
}

.myInputMismatch, .myInput1Mismatch { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input id="myInput" type="text" placeholder="Search..">
<input id="myInput1" type="text" placeholder="Search..">
<section id="myDIV">
  <h2> If I type "two" in the first searchbox and than "three" in second, the second searchbox overwrites the first.</h2>
  <p>one two </p>
  <p>one three </p>
</section>

如何使用jQuery对HTML文档执行多次搜索

1 个答案: