入力フィルタ付きDivのライブ検索

Question

https://jsfiddle.net/Lh9efLxm/

ライブ検索スクリプトでいくつか問題があります。

は、私が "行" としていくつかののdivを持っていると "列" など、いくつかののp

入力ががすべての "行" を非表示にする#filterとしてFILD（DIV）関係ないと宣言した

$('#results div').hide(); 

しかし、私はいくつかのミスを理解しているようです。

誰かが私を助けることができますか？ thx

Answer 1

eachループ内の特定のものではなく、すべて#results divを非表示にして表示します。セレクタをthisに変更してください。

さらに、jQueryをフィーリングに含めるのを忘れてしまった。

$("#filter").keyup(function() { 
 

 
     // Retrieve the input field text and reset the count to zero 
 
     var filter = $(this).val(), 
 
     count = 0; 
 

 
     // Loop through the comment list 
 
     $('#results div').each(function() { 
 

 

 
     // If the list item does not contain the text phrase fade it out 
 
     if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
 
      $(this).hide(); // MY CHANGE 
 

 
      // Show the list item if the phrase matches and increase the count by 1 
 
     } else { 
 
      $(this).show(); // MY CHANGE 
 
      count++; 
 
     } 
 

 
     }); 
 

 
    });

.header { 
 
    display: flex; 
 
} 
 

 
.header p { 
 
    flex: 1; 
 
    font-weight: bold; 
 
} 
 

 
.results { 
 
    display: flex; 
 
} 
 

 
.results p { 
 
    flex: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="filter" type="text"> 
 

 
<div id="header"> 
 
    <div class="header"> 
 
    <p>ID</p> 
 
    <p>Manufacturer</p> 
 
    <p>Type</p> 
 
    <p>PS</p> 
 
    </div> 
 
</div> 
 

 
<div id="results"> 
 
    <div class="results"> 
 
    <p>1</p> 
 
    <p>Toyota</p> 
 
    <p>C 200</p> 
 
    <p>114</p> 
 
    </div> 
 
    <div class="results"> 
 
    <p>2</p> 
 
    <p>Mercedes</p> 
 
    <p>C 220</p> 
 
    <p>144</p> 
 
    </div> 
 
</div>

JSFiddle