searching results for li using jquery

Question

How can i display based on searching text.i have one textbox. if i entered some word or letter i want to display matching li content.how can i do it? anyone help.

html:

  <input type="text" id="dropTextnew">
      <input type="button" name="team-btn" id="team-btn" value="Search">  
      <ul id="addList"> 
      <li><input type="checkbox" /><span>MacLeod Conner</span></li>
      <li><input type="checkbox" /><span>Dolores Arnold</span></li>
      <li><input type="checkbox" /><span>Blake Francis</span></li>
      <li><input type="checkbox" /><span>Chavarin Deanna</span></li>
      <li><input type="checkbox" /><span>Robert</span></li>
      <li><input type="checkbox" /><span>Zimmerman</span></li>
      <li><input type="checkbox" /><span>Zimmerman</span></li>
      <li><input type="checkbox" /><span>Chavarin Conner</span></li> 
      </ul>  

JS:

 $("#team-btn").on("click", function(e){

 var textVal=$("#dropTextnew").val(); 

 });

Answer 1

You can use the jQuery :contains selector.

$("#addList li").hide();
$("#addList li:contains('" + textVal "')").show();

Answer 2

https://jsfiddle.net/oqy1b9sy/

$("#team-btn").on("click", function(e){
 var textVal=$("#dropTextnew").val(); 
 var hits = 0;

 $("li").each(function() {
   if ($(this).text() == textVal) {
     $(this).css({color: "#f0f"})
     hits++;
   } else {
     $(this).css({opacity: 0.2})
   }
 })
 if (!hits) $("li").css({color: "#000"}).animate({opacity: 1}, 1000);
 hits = 0;
 });

Answer 3

You can use filter to check if the li text contains the text in the search and hide the li which not contains.

 $("#team-btn").on("click", function(e) { var textVal = $("#dropTextnew").val(); $('#addList li').show().filter(function(){ console.log($(this).find('span').text()); return $(this).text().toLowerCase().indexOf(textVal) == -1 && textVal != ''; }).hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="dropTextnew"> <input type="button" name="team-btn" id="team-btn" value="Search"> <ul id="addList"> <li><input type="checkbox" /><span>MacLeod Conner</span></li> <li><input type="checkbox" /><span>Dolores Arnold</span></li> <li><input type="checkbox" /><span>Blake Francis</span></li> <li><input type="checkbox" /><span>Chavarin Deanna</span></li> <li><input type="checkbox" /><span>Robert</span></li> <li><input type="checkbox" /><span>Zimmerman</span></li> <li><input type="checkbox" /><span>Zimmerman</span></li> <li><input type="checkbox" /><span>Chavarin Conner</span></li> </ul>