Bootstrap 中的过滤器是什么？

使用 Bootstrap，我们可以搜索或过滤出我们在网站上搜索特定项目/单词时想要显示的所需输出。尽管Bootstrap没有为我们提供允许过滤元素的组件或实用程序。为此，我们必须使用 jQuery 来过滤或搜索。

在本文中，我们将讨论一些可以在我们的应用程序中使用的过滤器方法。

Bootstrap 过滤表：您可以在不包括表头的表体上同时使用 Bootstrap 和 jQuery 过滤表元素。可以进行不区分大小写的过滤。

示例：下面的代码已在表格中实现，用于过滤元素。

HTML

  

    Filters in Bootstrap
    
    
    
    
    
    
    
    
    
    
    

  

    
        Bootstrap filter for table
        
        
        
            
                
                    
                    
                    
                    
                
            
            
                
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                
            
        IdNameEmailPhone [e-mail][e-mail][e-mail][e-mail]5846325968
    
  
    
    
        $(document).ready(function () {
       
            $("#txtInputTable").on("keyup", function () {
                var value = $(this).val().toLowerCase();     
                $("#tableDetails tr").filter(function () {
                    $(this).toggle($(this).text()
                      .toLowerCase().indexOf(value) > -1)
                });
            });
        });
    

  

输出：

自举过滤表

Bootstrap 过滤任何内容：我们可以过滤网站上的任何内容，无论是表格、列表、按钮、段落还是任何内容。

示例：已实施以下代码以过滤您网站上存在的任何内容。

HTML

  

    Filters in Bootstrap
    
    
    
    
    
    
    
    
    
    
    

  

    
        Bootstrap filter for anything
        
        
            Type a paragraph which you want to find
            First button
            Search anything you want
            Another paragraph.
            Another button
  
        
    
  
  
    
    
        $(document).ready(function () {
              
            $("#txtInputAnything").on("keyup", function () {
                var value = $(this).val().toLowerCase();
                $("#myWeb *").filter(function () {
                    $(this).toggle($(this).text()
                      .toLowerCase().indexOf(value) > -1)
                });
            });
        });
    

  

输出：

引导过滤任何东西

Bootstrap 过滤器列表：类似于表过滤器，适用于列表。表过滤和列表过滤通常没有区别。

示例：下面的代码已在列表中实现，用于过滤项目。

HTML

  

    Filters in Bootstrap
    
    
    
    
    
    
    
    
    
    
    

  

    
        Bootstrap filter for list
        
        
        
            First list item
            Second list item
            Third list item
            Fourth list item
            Sixth list item
            Seventh list item
        
    
  
  
    
    
        $(document).ready(function () {
            $("#txtInputList").on("keyup", function () {
                var value = $(this).val().toLowerCase();
                $("#myList li").filter(function () {
                    $(this).toggle($(this).text()
                      .toLowerCase().indexOf(value) > -1)
                });
            });
        });
    

  

输出：

引导过滤器列表