Bootstrap 过滤器(高级)


自举过滤器

Bootstrap 没有允许过滤的组件。但是,我们可以使用jQuery过滤/搜索元素。


过滤表

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

示例

Type something in the input field to search the table for first names, last names or emails:


Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@mail.com
July Dooley july@greatstuff.com
Anja Ravendale a_r@test.com

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) 与搜索不匹配。我们使用toLowerCase()方法将文本转换为小写,这使得搜索不区分大小写(允许搜索时使用"john"、"John",甚至"JOHN")。


过滤列表

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

示例

Type something in the input field to search the list for items:


  • First item
  • Second item
  • Third item
  • Fourth
亲自试一试 »

过滤下拉菜单

对下拉菜单中的项目执行不区分大小写的搜索:

示例

Open the dropdown menu and type something in the input field to search for dropdown items:

亲自试一试 »

过滤任何内容

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

示例


I am a paragraph.

I am a div element inside div.

Another paragraph.

亲自试一试 »