Bootstrap 过滤器

定义和使用

Bootstrap 没有过滤器的组件；但是，我们可以使用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>

尝试一下

在输入字段中输入内容，以在表中搜索名字，姓氏或电子邮件：

姓氏	名字	电子邮件
John	Doe	john@example.com
Mary	Moe	mary@mail.com
July	Dooley	july@greatstuff.com
Anja	Ravendale	a_r@test.com

示例解析：

我们使用 jQuery 遍历每个表行，以检查是否有任何文本值与输入字段的值匹配；toggle方法隐藏与搜索不匹配的行（display：none）。我们使用 toLowerCase() 方法将文本转换为小写，这使搜索不区分大小写（在搜索时允许“john”，“John”，甚至“JOHN”）。

筛选列表

对列表中的项目执行不区分大小写的搜索；在输入字段中输入内容以在列表中搜索项目：

First item
Second item
Third item
Fourth

尝试一下

过滤任何东西

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

I am a paragraph.

I am a div element inside div.

Another paragraph.

尝试一下

定义和使用

筛选表格

筛选列表

过滤任何东西

相关页面