JSFiddle - React, Tailwind, and code Playground

by Shiva meda

HTML

<input type="text" name="search" placeholder="search" id="search" />

<ul  style="float:left">
  <li>
    <div class="name">Devi sri prasad</div>
    <div class="ltype">Music director</div>
  </li>
  <li>
    <div class="name">Mani Sharma</div>
    <div class="ltype">Music director</div>
  </li>
  <li>
    <div class="name">anoop rubens</div>
    <div class="ltype">Music director</div>
  </li>
  <li>
    <div class="name">yesu dasu</div>
    <div class="ltype">singer</div>
  </li>
  <li>
    <div class="name">S.P.Balu</div>
    <div class="ltype">singer</div>
  </li>
  <li>
    <div class="name">shankar mahadevan</div>
    <div class="ltype">singer</div>
  </li>
  <li>
    <div class="name">Shreya Ghoshal</div>
    <div class="ltype">singer</div>
  </li>
  <br>
</ul>

JavaScript

$(document).on('keyup','#search',function(){
	$.extend($.expr[":"], {
	"containsIN": function(elem, i, match, array) {
	return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
	}
});	
	var searchval = $(this).val();
	$("ul li .ltype:containsIN("+searchval+")").parent('li').show();
	$("ul li .ltype:not(:containsIN("+searchval+"))").parent('li').hide();
});