Bootstrap 4 过滤器 (高级)
Bootstrap 4 过滤器
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 元素内的文本进行不区分大小写的搜索
