<script> $(document).ready(function() { $('.s').keyup(function(){ var valThis = $(this).val().toLowerCase(); $('.countryList>li').each(function(){ $('.countryList1>li').hide(); var text = $(this).text().toLowerCase(); (text.indexOf(valThis) == 0) ? $(this).show() : $(this).hide('.countryList1>li'); }); }); }); </script>  

<input placeholder="Search..." class="s" type="text" /> 

<ul class="countryList"> <li><a href="#3"><span class="title">India</span></a> <span class="arrow"></span> <ul class="countryList1"> <li><a href="#3"><span class="title">KA</span></a></li> </ul> </li> <li><a href="#3"><span class="title">Pakistan</span></a> <span class="arrow "></span></li> <li><a href="#4">Sri Lanka</a></li> <li><a href="#5">Bangladesh</a></li> <li><a href="#6">Canada</a></li> <li><a href="#7">United Kingdom</a></li> <li><a href="#8">Australia</a></li> <li><a href="#9">Argentina</a></li> </ul>