Suche Ergebnisse für li mit jquery

Question

Wie kann ich basierend auf der Suche Text anzuzeigen.Ich habe eine Textbox. Wenn ich ein Wort oder einen Buchstaben eingegeben habe, möchte ich den passenden Inhalt anzeigen. Wie kann ich es tun? jemand helfen.

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

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 2

können Sie den Wähler jQuery :contains verwenden.

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

Answer 3

können Sie filter überprüfen verwenden, wenn der li Text den Text in der Suche enthält und die li verstecken, die nicht enthält.

$("#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>