検索入力に基づいてdivを表示/非表示

Question

検索入力と一致しないものをフィルタ/隠すために、検索バーを使用するいくつかのjavascriptを試しました。私は約95％の作業をしていますが、修正するには1つの問題があります。

私のページには、家具グループとそれに含まれる家具が表示されます。グループ名/番号と説明は見出しのdivとして存在し、その下には実際の家具で作成されたテーブルがあります。私の現在のjavascriptは、テーブルの行にある「ソファ」または「椅子」とタイプしている限り動作します。ただし、家具グループの名前を入力すると、名前/番号/説明と画像だけが表示されますが、テーブルは非表示になります。グループ名/記述は、このブロックにあります。

@foreach ($orderFormData->pgroups as $pgroup) 
<div class="group-container"> 
     <h3 style="font-size: 26px; padding: 10px 0;">{{ $pgroup->group_name 
}} - {{ $pgroup->group_code }}</h3> 
     <p class="uk-text-muted" style="font-size: 20px;" >{!! 
html_entity_decode($pgroup->group_desc) !!}</p> 

だから、私は試してみて、少し私の入力は、グループの名前や説明と一致した場合、それはまだのために全体の表を示しているように、機能を追加し、これをリファクタリングする必要がありますそのdiv。

私が持っていたアイデアは、右のforeachループの下に、以下のhtmlの私の最初の行の下に、この

<script type="text/javascript"> 
if($('.group-container').children('tr:visible').length == 0) { 
$('.group-container').hide(); 
} else { 
$('.group-container').show(); 
} 
</script> 

のようなものを追加することでした。しかし、それが正しいアイデアかどうか、それを正確に使うべきかどうかはわかりません。

HTML：

@foreach ($orderFormData->pgroups as $pgroup) 
<div class="group-container"> 
     <h3 style="font-size: 26px; padding: 10px 0;">{{ $pgroup->group_name }} - {{ $pgroup->group_code }}</h3> 
     <p class="uk-text-muted" style="font-size: 20px;" >{!! html_entity_decode($pgroup->group_desc) !!}</p> <!--Group Description--> 

     <div class="uk-grid"> 
      <div class="uk-width-2-10"> 
       <ul style="margin: 0; padding: 0; list-style-type: none; float: left; width: 100%;"> 
        @foreach ($pgroup->image_names as $image_name) 
        <li><a href="/imagelib/Bigthumbs/{{ substr($image_name, 0, strpos($image_name, ',')) }}" target=_blank><img src="/imagelib/Bigthumbs/{{ substr($image_name, 0, strpos($image_name, ',')) }}" style="width: 100%; height: auto;" /></a><span class="uk-text-center" style="padding: 0 0 5px;">{{ substr($image_name, strpos($image_name, ',') + 1) }}</span></li> 
        @endforeach 
       </ul> 
      </div> 

      <div class="uk-width-8-10"> 
       <table id="userTbl" class="uk-table" style="width: 100%; min-width: 768px;"> 
        <thead> 
        <tr> 
         <th style="width: 10%; font-size: 20px;">Frame</th> 
         <th style="width: 20%; font-size: 20px;">Description</th> 
         <th style="width: 15%; font-size: 20px;">Cover/Color</th> 
         <th style="width: 15%; font-size: 20px;">Cover/Color</th> 
         <th style="width: 20%; font-size: 20px;">Quantity</th> 
         <th style="width: 15%; font-size: 20px; text-align: center;"><b>Price</b></th> 
        </tr> 
        </thead> 

        <tbody> 

        @foreach ($pgroup->pskus as $psku) 
        <?php $tempdata['sku-' . $i] = $psku ?> 
        <tr class="@if (isset($psku->quantity) && $psku->quantity > 0) {{ highlight }} @endif"> 
         <td style="font-weight: 500; line-height: 30px; font-size: 14px;">{{ $psku->frame_fmt }}</td> 
         <td style="font-weight: 500; line-height: 30px; font-size: 14px;">{!! html_entity_decode($psku->frame_desc) !!}</td> 
         <td style="font-weight: 500; line-height: 30px; font-size: 14px;">{{ $psku->cover1_code }}/{{ $psku->color1_code }} {{ $psku->color1_desc }}</td> 
         <td style="font-weight: 500; line-height: 30px; font-size: 14px;">{{ $psku->cover2_code }}/{{ $psku->color2_code }} {{ $psku->color2_desc }}</td> 
         <td style="font-weight: 700; line-height: 30px; font-size: 14px;"> 
          <span style="text-align: center; display: block; width: 100%;">${{ $psku->price }}</span> 
         </td> 
        </tr> 
        <?php $i++; ?> 
        @endforeach 
        </tbody> 
       </table> 
      </div> 

     </div> 
</div> 
@endforeach 

JSは：

<script> 
$(document).ready(function(){ 
$("#srch-term").keyup(function(){ 

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

    // Loop through the main container as well as the table body and row that contains the match 
    $(".group-container, tbody tr").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).fadeOut(); 

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

Answer 1

あなたは最初のグループを検索し、名前/説明が一致した場合、グループ全体およびすべてのそれの行を示すことができました。それ以外の場合は、通常の手順を実行します。

<script> 
$(document).ready(function(){ 
$("#srch-term").keyup(function(){ 

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

    // Loop through the main container as well as the table body and row that contains the match 
    $(".group-container").each(function(){ 
     //check if filter matches the group name or description 
     var group_name = $(this).children('h3').text() 
     var group_description = $(this).children('.uk-text-muted').text() 

     if(group_name.search(search_regex)>=0 || group_description.search(search_regex)>=0){ // filter matches 
      $(this).show() // show group 
      $(this).find("tbody tr").show() // and all children 
      return // skip tr filtering 
     } 

     var no_matches = true 

     $(this).find("tbody tr").each(function(){ 

      // If the list item does not contain the text phrase fade it out 
      if ($(this).text().search(search_regex) < 0) { 
       $(this).fadeOut(); 

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

     if(no_matches){ // if no tr matched the search either, hide whole group 
      $(this).fadeOut(); 
     } 

    }); 
    }); 
}); 
</script>