JSFiddle - React, Tailwind, and code Playground

HTML

<div id="check">
    <input type="text" id="result"/>
<ul id="cityName"></ul>
</div>

CSS

#check{
 width:163px;
 overflow:auto;    
 border:1px solid #CCCCCC;
 border-radius: 5px;
 margin: 10px auto;   
}
ul li{
  padding-left:5px;  
}

JavaScript

function states(json) {

    var obj = $.parseJSON(json);
    var html = "";
    $.each(obj, function() {
        html += '<li>' + '<input type="checkbox" name="checkboxlist" class="checked"/>' + this.label + '</li>';
    });

    $("#cityName").append(html);
}
$(document).ready(function() {
    data = '[{"label":"Arunachal Pradesh"},{"label":"Andhra Pradesh"},{"label":"Bihar"},{"label":"Chandigarh"},{"label":"Chattishgarh"},{"label":"New Delhi"},{"label":"Maharashtra"},{"label":"Madhya Pradesh"},{"label":"Karnataka"},{"label":"Tamil Nadu"},{"label":"Kerala"},{"label":"Gujarat"},{"label":"Punjab"},{"label":"Rajasthan"}]';
    states(data);
    $('.checked').click(function () {
    var checkValues = $('input[name=checkboxlist]:checked').map(function() {
        return $(this).parent().text();
    }).get();
      
      $('#result').val(checkValues);
  });

});

$('input').keyup(function() {
    filter(this); 
});

function filter(element) {
    var value = $(element).val().toLowerCase();
    $("#cityName > li").each(function () {
        
        if ($(this).text().toLowerCase().indexOf(value ) >-1) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
}