JSFiddle - React, Tailwind, and code Playground
HTML
<div class="search-populer">
<input type="text" class="form-control" id="populerNameKey">
<i class="fa fa-search"></i>
</div>
<ul id="destPopuler">
<li class="country">England</li>
<li class="testing"><a href="#">Liverpool</a></li>
<li class="testing"><a href="#">London</a></li>
<li class="testing"><a href="#">Manchester</a></li>
<li class="testing"><a href="#">Norwich</a></li>
<li class="country">Italy</li>
<li class="testing"><a href="#">Roma</a></li>
<li class="country">Spain</li>
<li class="testing"><a href="#">Madrid Spain</a></li>
<li class="testing"><a href="#">Valencia</a></li>
<li class="testing"><a href="#">Barcelona</a></li>
JavaScript
$("#populerNameKey").on('keyup', function(){
var value = $(this).val();
$("#destPopuler li").each(function () {
if ($(this).text().toLowerCase().search(value) > -1) {
$(this).hide();
$(this).prevAll('.country').first().show();
} else {
$(this).hide();
}
});
})