jQueryを使用してHTML文書を複数検索する方法

2つの検索ボックスを持つアプリケーションを作成したいとします。最初のボックスに検索キーワードを渡し、次に2番目のボックスに検索キーワードを渡します。残念ながら、アプリケーションは最初の検索を維持しません。 2番目のボックスに入ると、最初の検索が上書きされます。jQueryを使用してHTML文書を複数検索する方法

<!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>

最初の検索の結果を保存して、その最初の検索で2番目の検索を実行できますか？

出典

2017-12-14 Gilbert Cut

あなたは、両方の検索ボックスの結果を維持したい場合は、私は単純に両方のボックスに同じ検索機能を実装して - 1を検索したり、他の検索。同じことを2回行うことで、あなたはどちらかを破壊するでしょう。ちょうど考え - 両方のクラスに同じクラスを与え、そのクラスとの入力内容を＃div1にフィルターする関数を実装します。 – Snowmonkey

代わりにクラスを使うことをお勧めします。最初のフィルタでは、最初のフィルタと一致しないものはすべて、 'hideFilterOne'またはその上にディスプレイがないものを追加します。もう1つは 'hideFilterTwo'か何かで同じことをする。次に、フィルタ2がhideクラスを追加しない場合でも、最初のフィルタで非表示にすることができます。彼らは独立して行動するが、一緒に働くこともできるだろう。 – Taplar

サイドノートですが。実際には、そのメソッドを適切に使用していないので、filter（）の代わりにeach（）を使用する必要があります。 show（） ' – Taplar

検索に失敗した場合にクラスを使用して非表示にします。

$(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>

出典

2017-12-14 21:30:20 Taplar

これは動作します。これは機能しています。私はさらなるテストを進めます。ありがとうございました！ –

jQueryを使用してHTML文書を複数検索する方法

答えて

関連する問題