JSFiddle - React, Tailwind, and code Playground

by thesystemrestart

HTML

<form>
<input type="text" id="people_name">
        <div style="width:530px; height:220px; overflow-y:scroll;">

              <div class="people">
                <label class="checkbox_1" for="1">
                  <img src="1.jpg" />
                  <span>
                    Jolly Bob Monumir
                  </span>
                </label>
                <input type="checkbox" name="people[]" value="1" id="1" />
              </div>

              <div class="people">
                <label class="checkbox_1" for="2">
                  <img src="2.jpg" />
                  <span>
                    Jonathan Monumir
                  </span>
                </label>
                <input type="checkbox" name="people[]" value="2" id="4" />
              </div>

              <div class="people">
                <label class="checkbox_1" for="3">
                  <img src="3.jpg" />
                  <span>
                    Misoury Crow
                  </span>
                </label>
                <input type="checkbox" name="people[]" value="3" id="3" />
              </div>

              <div class="people">
                <label class="checkbox_1" for="4">
                  <img src="4.jpg" />
                  <span>
                    Michael Crow
                  </span>
                </label>
                <input type="checkbox" name="people[]" value="4" class="checkbox_1" id="4" />
              </div>

        </div>                
    </form>

CSS

.people {
    display: none
}

JavaScript

$(function(){
    $('input#people_name').on('keyup', function() {
      var value = this.value.trim();
        if(value.length) {
            $('div.people span').filter(function() {
                return new RegExp(value, 'i').test($(this).text());
            }).closest('div.people').show();
        } else $('div.people').hide();
    });
});