Bootstrap 4 过滤器(高级)
Bootstrap 4 过滤器
Bootstrap 没有提供允许过滤的组件。但是,我们可以使用 jQuery 来过滤/搜索元素。
过滤表格
对表格中的项执行不区分大小写的搜索
示例
在输入框中键入内容以搜索表格中的名字、姓氏或电子邮件
名 | 姓 | 邮箱 |
---|---|---|
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”)。
过滤列表
对列表中的项执行不区分大小写的搜索
过滤任意内容
对 div 元素内的文本执行不区分大小写的搜索