JSFiddle - React, Tailwind, and code Playground

by UI Designer

HTML

<input class="my-textbox" />

<div class="personsMenu">
    <ul>
              <li>
                <label>
                  <input type="checkbox">
                      <span>Chennai</span></label>
              </li>
              <li>
                <label>
                  <input type="checkbox">
                      <span>Kancheepuram</span></label>
              </li>
              <li> 
                <label>
                  <input type="checkbox">
                  Vellore</label>
              </li>
                  </ul>
                  
    <div class="person">
        <div class="name">John</div>
       
    </div>
    <div class="person">
        <div class="name">Kate</div>
        
    </div>
    <div class="person">
        <div class="name">Tom</div>
       
    </div>
</div>

JavaScript

$('.my-textbox').keyup(function() {
    var value = $(this).val();
   var exp = new RegExp('^' + value, 'i');

    $('.personsMenu li').each(function() {
        var isMatch = exp.test($('span', this).text());
        $(this).toggle(isMatch);
    });
});