Question

如何基于搜索文本显示。我有一个文本框。如果我输入了一些单词或字母，我想显示匹配的li内容。我可以这样做吗？任何人帮忙。

HTML：

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

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

 });

JS：

insert

Answer 1

您可以使用jQuery :contains选择器。

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

您可以使用filter检查li文本是否包含搜索中的文本，并隐藏不包含的li。

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用jquery搜索li的结果

3 个答案: