Bootstrap 过滤（Filters）

Bootstrap 过滤

Bootstrap 没有可以过滤筛选的组件。然而，我们可以使用 jQuery 来过滤/搜索元素。

过滤表格

对表中的项执行不区分大小写的搜索:

实例

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 元素中的文本执行不区分大小写的搜索:

实例