jqueryのテキスト入力からdom要素をフィルタリングするチェックボックス

Question

私は、名前やデータ属性に基づいていくつかのチェックボックスをフィルタリングしなければならないプロジェクトに取り組んでいます。例えば、テキストボックスにテキストを入力する場合は 、私はすべてを非表示にして、テキスト領域に入力したサブ文字列を含まないチェックボックスのみを表示したい。 私のチェックボックスは動的に作成されています。

<div class="col-xs-6"> 
       <div class="form-group @if($errors->has('role_name')) {{'has-error'}} @endif col-xs-12"> 
       <label for="role_name" class="col-xs-5 control-label">@if($errors->has('role_name'))<i class="fa fa-times-circle-o"></i>@endif Role Name</label> 
       <div class="col-xs-7"> 
        <input class="form-control" id="role_name" value="{{old('role_name')}}" type="text" name="role_name"> 
        @if($errors->has('role_name')) 
        <span class="help-block">{{ $errors->first('role_name') }}</span> 
        @endif 
       </div> 
       </div> 
      </div> 

<?php $count = 0; ?> 
      @foreach($permissions as $key => $per) 
      <?php $count++; ?> 
       @if($count == 1) <div class="row"> @endif 
       <div class="col-xs-4"> 
       <div class="form-group @if($errors->has('permission_id')) {{'has-error'}} @endif col-xs-12"> 
        <div class="col-xs-12"> 
        <div class="checkbox"> 
         <label> 
         <input class="permission_id" type="checkbox" value="{{$per->permission_id}}" name="permission_id[]" data-text='{{$per->display_name}}'> {{$per->display_name}} 
         </label> 
        </div> 
        @if($errors->has('permission_id')) 
         <span class="help-block">{{ $errors->first('permission_id') }}</span> 
        @endif 
        </div> 
       </div> 
       </div> 
       @if($count == 3) </div> <hr class="row-divider" style="margin: 0px auto;" /> <?php $count = 0; ?> @endif 
      @endforeach 

これは私が最終的に行うためのdivのCSSを作るためにjqueryのを使用したい私のループと、テキストボックス

ある「表示：なし;」それらをif条件の中で消滅させるために。 私はデータとattrを使って値を取得して比較しようとしましたが、どこにもいません。 私はどこが間違っているのか分かりません。 私は単純にすべての$（ 'input [type = checkbox]'）を通してitetrateしようとします。each（）は最初の要素をn回だけ印刷しています。任意のヘルプ

Answer 1

これは私が思い付いた解決策です。 それは私が見ることができる限り働いています..しかし、私が気づいていない、そして、私が例外を処理していない何らかの終わりがあるなら、私に教えてください。 ヘルプは常に優先されます。

$('#role_name').on('input',function(){ //when input is changing in the field 
    $('input.permission_id').each(function(){ //itetrate through all inputs with permission_id 
     //check all the check boxes that match the description 
     if($(this).data('text').toLowerCase().indexOf($('#role_name').val().toLowerCase()) >= 0) 
     $(this).parents().eq(3).show(); //show the match check boxes 
     else 
     $(this).parents().eq(3).hide(); //hide the un match boxes 
    }); 

    }); 

これは私がHTMLで目的の親と行を取得するには、HTMLのdiv要素のいくつかをcomentedしているが、私は、これは良い解決策だと思うjQueryののfuctionです。私をガイドしないでください