Bootstrap 过滤器



  • 定义和使用

    Bootstrap 没有过滤器的组件;但是,我们可以使用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>
    
    在输入字段中输入内容,以在表中搜索名字,姓氏或电子邮件:
    姓氏 名字 电子邮件
    John Doe john@example.com
    Mary Moe mary@mail.com
    July Dooley july@greatstuff.com
    Anja Ravendale a_r@test.com
    示例解析:
    我们使用 jQuery 遍历每个表行,以检查是否有任何文本值与输入字段的值匹配;toggle方法隐藏与搜索不匹配的行(display:none)。 我们使用 toLowerCase() 方法将文本转换为小写,这使搜索不区分大小写(在搜索时允许“john”,“John”,甚至“JOHN”)。
  • 筛选列表

    对列表中的项目执行不区分大小写的搜索;在输入字段中输入内容以在列表中搜索项目:
    • First item
    • Second item
    • Third item
    • Fourth
  • 过滤任何东西

    对div元素内的文本执行不区分大小写的搜索:
    I am a paragraph.
    I am a div element inside div.
    Another paragraph.