Bootstrap 筛选器 (高级)
Bootstrap 筛选器
Bootstrap 没有提供一个用于筛选的组件。但是，我们可以使用 jQuery 来筛选/搜索元素。
筛选表格
对表格中的项进行不区分大小写的搜索
示例
在输入框中输入内容，搜索表格中的名字、姓氏或邮箱
| 名字 | 姓氏 | 邮箱 |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
| Anja | Ravendale | [email protected] |
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" 在搜索中）。
筛选列表
对列表中的项进行不区分大小写的搜索
筛选下拉菜单
对下拉菜单中的项进行不区分大小写的搜索
筛选任何内容
对 div 元素内的文本进行不区分大小写的搜索
