Bootstrap 过滤器（高级）
自举过滤器
Bootstrap 没有允许过滤的组件。但是，我们可以使用jQuery过滤/搜索元素。
过滤表
对表中的项目执行不区分大小写的搜索：
示例
Type something in the input field to search the table for first names, last names or emails:
| Firstname | Lastname | |
|---|---|---|
| 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
过滤下拉菜单
对下拉菜单中的项目执行不区分大小写的搜索：
过滤任何内容
对 div 元素内的文本执行不区分大小写的搜索：
截取页面反馈部分，让我们更快修复内容！也可以直接跳过填写反馈内容!