JSFiddle - React, Tailwind, and code Playground
HTML
<input class="my-textbox" />
<div class="personsMenu">
<ul>
<li>
<label>
Uttar Pradesh</label>
</li>
<li>
<label>
Kancheepuram</label>
</li>
<li>
<label>
Vellore </label>
</li>
<li>
<label> West Bengal</label>
</li>
<li>
<label>
Andhra Pradesh</label>
</li>
<li>
<label>
Madhya Pradesh</label>
</li>
<li>
<label>
Tamil Nadu</label>
</li>
<li>
<label>
Rajasthan </label>
</li>
</ul>
<div class="no-results" style="display:none">no results found</div>
</div>
JavaScript
var $block = $('.no-results');
$(".my-textbox").keyup(function() {
var val = $(this).val();
alert(val)
var isMatch = false;
$(".personsMenu li").each(function(i) {
var content = $(this).html();
if(content.toLowerCase().indexOf(val) == -1) {
$(this).hide();
} else {
isMatch = true;
$(this).show();
}
});
$block.toggle(!isMatch);
});