jQuery - 筛选

jQuery 筛选

使用 jQuery 来筛选/搜索特定元素。

筛选表格

对表格中的项目执行不区分大小写的搜索：

实例

在输入框中输入内容，搜索表格中的名字、姓氏或电子邮件：

jQuery

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

亲自试一试

示例说明：

我们使用 jQuery 遍历表格的每一行，检查是否有任何文本值与输入框中的值匹配。

toggle() 方法会隐藏与搜索条件不匹配的行（display:none）。

我们使用 DOM 方法 toLowerCase() 将文本转换为小写，这使得搜索不区分大小写（允许搜索 "john"、"John" 甚至 "JOHN"）。

筛选列表

对列表中的项目执行不区分大小写的搜索：

实例

在输入框中输入内容，搜索列表中的项目：

• 第一项
• 第二项
• 第三项
• 第四项

亲自试一试

筛选任意内容

对 div 元素内的文本执行不区分大小写的搜索：

实例

亲自试一试