javascript - Hide checkboxes if they do not match input text -

basically have list of check boxes so

<label style='padding-right:30px;' > <input type='checkbox' name='tag[]' value='1'> bob ; <input type='checkbox' name='tag[]' value='2'> john ; <input type='checkbox' name='tag[]' value='3'> mary ; </label> 

i have input box user type checkbox show

<input type="text" name="filter" placeholder="filter tag name" id="filter" > 

what want when user types bob, check boxes without text value of bob hidden.

i have java script matching value of checkbox not text of it

js follows

<script src="js/jquery.min.js"></script> <script type="text/javascript">     $('#filter').on('keyup', function() {     var query = this.value;     $('[name^="tag[]"]').each(function(i, elem) {               if (elem.value.tolowercase().indexof(query) != -1) {                   $(this).parent().css('display', 'inline-block');                   $(this).css('display', 'inline-block');               }else{                   $(this).parent().css('display', 'none');                   $(this).css('display', 'none');               }         });     }); </script> 

1. surround checkboxes spans extract text
2. use input event fire whenever input changes. better keyup because keyup may fir when ctrl button clicked example
3. show checkbox default. check if trimmed value contains filter value. if not, hide

$('#filter').on('input', function() {    var filter = $(this).val();    var options = $('span:has(:checkbox)');    options.each(function() {      $(this).show();      if ($(this).text().trim().indexof(filter) < 0) {        $(this).hide();      }    });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>  <label style='padding-right:30px;' >  <span><input type='checkbox' name='tag[]' value='1'> bob</span>  <span><input type='checkbox' name='tag[]' value='2'> john </span>  <span><input type='checkbox' name='tag[]' value='3'> mary </span>  </label>  <input type="text" name="filter" placeholder="filter tag name" id="filter" >