JSFiddle - React, Tailwind, and code Playground

by Kevin Pliester

HTML

<div class="search-checkboxes">
  <input type="text" name="s">
  <div class="checkboxes">
    <label data-name="Alfred">
     <input type="checkbox"> Alfred
     </label>
    <label data-name="Bernd">
     <input type="checkbox"> Bernd
     </label>
    <label data-name="Kevin">
     <input type="checkbox"> Kevin
     </label>
  </div>
</div>

CSS

.checkboxes > label {
  display: block;
}

JavaScript

(function($){
	var searchContainer = $('.search-checkboxes')
	$(searchContainer).find('[name=s]').on('input',function(){
  	var searchString = $(this).val().toLowerCase()
    $(searchContainer).find('label').not('[data-name^='+searchString+']').hide();
  })
})(jQuery)