Bootstrap 4 筛选 (高级)
Bootstrap 4 筛选
Bootstrap 没有筛选组件。我们可以使用 jQuery 来筛选 / 搜索元素。
筛选表格
对表中的项目执行不区分大小写的搜索:
实例
在 input 字段中键入一些内容，就可以搜索表格中的名字、姓氏或电子邮件:
| 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")。
筛选列表
对列表中的项目执行不区分大小写的搜索:
筛选所有文本
对 div 元素中的所有文本执行不区分大小写的搜索:
