filter dom elements checkbox von der texteingabe in jquery

Question

Ich arbeite an einem Projekt, in dem ich einige Kontrollkästchen auf den Basen der Namen oder Datenattribute filtern muss. zum Beispiel, wenn ich einen etwas Text auf Textbox eintrage , dann möchte ich alle ausblenden und nur die Kontrollkästchen anzeigen, die nicht die Unterzeichenfolge enthalten, die ich in den Textbereich eingegeben habe. meine Kontrollkästchen werden dynamisch erstellt.

<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 

das ist meine Schleife und Textfeld

i schließlich wollen jquery mit CSS des div zu tun machen "display: none;" um sie innerhalb der if-Bedingung verschwinden zu lassen. Ich habe versucht, Daten und attr zu verwenden, um Werte zu vergleichen und zu vergleichen .. aber ich komme nirgendwohin. Ich weiß nicht, wo ich falsch mache. und wenn ich einfach versuche, durch alle $ ('input [type = checkbox]') zu setzen. Jedes() ich drucke nur das erste element für n mal. jede Hilfe

Answer 1

das ist die Lösung, die ich mir ausgedacht habe. es funktioniert soweit ich sehen kann .. aber wenn es irgendwelche verlieren endet, dass ich nicht bewusst bin und ich bin nicht die Ausnahme behandeln bitte lass es mich wissen. jede Hilfe ist immer appiitiert.

$('#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 
    }); 

    }); 

ist dies die jquery fuction i einige der html divs haben comented zu gewünschten Eltern zu erhalten und in der HTML-Zeile, aber ich denke, das ist eine gute Lösung. Wenn nicht, bitte führe mich