javascript - 如何使用 :not() and :contains()? 反转 选择

Question

我想用 jQuery 进行实时搜索。这是我的代码:

$("#searchInput").on("keyup", function () {
        var searchTerm = $("#searchInput").val();
        $('li:contains("' + searchTerm + '")').show().siblings(':not(li:contains("' + searchTerm + '"))').hide();
});

正在显示 <li>其中包含“搜索到的文本”可以正常工作，但第二部分(隐藏其余元素)不能完全工作。

如何隐藏 <li>什么时候搜索不相关的词？

Answer 1

您可以使用 jQuery.not

解决方案一

$("#searchInput").on("keyup", function() {
  var searchTerm = $("#searchInput").val();
  $("ul li").show().not($('li:contains("' + searchTerm + '")')).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="searchInput" />
<ul>
<li>
  Hello
</li>
<li>
  World
</li>
<li>
  List 1
</li>
<li>
 Word
</li>
<li>
  Another Li
</li>
</ul>

您可以使用 jQuery filter (见下面的片段)

解决方案 2

$("#searchInput").on("keyup", function() {
  var searchTerm = $("#searchInput").val();
  $("ul li").show().filter(function() {
    return $(this).text().indexOf(searchTerm) == -1
  }).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="searchInput" />
<ul>
<li>
  Hello
</li>
<li>
  World
</li>
<li>
  List 1
</li>
<li>
 Word
</li>
<li>
  Another Li
</li>
</ul>