jueryを使用してliを検索する

Question

検索テキストに基づいて表示するにはどうすればよいですか。テキストボックスは1つです。私はいくつかの単語や文字を入力した場合私は一致するliのcontent.hを表示したい私はそれを行うことはできますか？誰でも助けてください。

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

あなたはjQueryの:containsセレクタを使用することができます。

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

Answer 3

あなたは、Liテキストが検索にテキストが含まれているかどうかを確認し、含まれていないliを非表示にするfilterを使用することができます。

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