语义-UI 搜索

Semantic UI是一个可与 Bootstrap 相媲美的主题前端编程框架。它是一个基于 CSS 和 jQuery 的开源框架。它包括预先构建的语义元素，有助于使用 HTML 创建有吸引力、响应式和灵活的布局。

语义 UI 中的搜索模块允许用户查询数据集以获取结果。作为搜索的结果，可以显示结果集合。搜索可以返回按类别组织的遥远资料的结果。在静态本地源中，搜索可以寻找结果。

语义 UI 搜索类型：

• 标准：此搜索类型可用于创建标准类型的搜索框，并可用于显示输出列表。
• 类别：此搜索类型可用于创建一个搜索框，显示按类别排序的结果。
• 本地搜索：此搜索选项可用于静态显示本地源中的结果集。
• 本地类别搜索：此搜索选项可用于对本地源中的结果进行静态分类。

语义 UI 搜索状态：

• loading：该类作为一个指示器，用于显示加载状态。

语义 UI 搜索变体：

• 已禁用：这将禁用搜索栏以防止用户搜索。
• 流体：这允许搜索结果扩展以覆盖其容器的宽度。
• 对齐：此选项允许搜索栏中的结果左对齐或右对齐。

句法：

示例 1 ：此示例说明语义 UI 搜索类型。

• 标准搜索：

输出：

• 本地搜索类型：

HTML

  

    
        Semantic-UI Search Standard Type 
    
    
    
    
    
    

  

    
        
            
                GeeksforGeeks
            
            Semantic-UI Search
            Local Search Type
            
                
                     
                       
                
                
            
        
    
    
        var content = [{
            title: "Python",
        }, {
            title: "Javascript ",
        }, {
            title: "Java",
        }, ];
        $(".ui.search").search({
            source: content,
            fullTextSearch: false,
        });
    

输出：

示例 2：此示例说明语义 UI 搜索状态。

HTML

  

    
        Semantic-UI Search Standard Type 
    
    
    
    
    
    

  

    
        
            GeeksforGeeks
        
        Semantic-UI Search 
        
            
                
                    
            
            
        
    

输出：

示例 3 ：此示例说明语义 UI 搜索变体。

HTML

  

    
        Semantic-UI Search 
    
    
    
    
    
    

  

    
        
            GeeksforGeeks
        
        
            Semantic UI Search Variations
        
        
        Disabled search
        
             
                
                 
            
            
        
        
        Fluid search
        
             
                
                
            
            
        
        
        Aligned search
        
            
                
                    
                    
                
                
            
        
    
    
        var content = [{
            title: "Python",
            url: 
"https://www.geeksforgeeks.org/python-programming-language/",
            description: `Python is a high-level, 
            general-purpose and a very popular 
            programming language.`,
        }, {
            title: "Javascript ",
            url: 
"https://www.geeksforgeeks.org/javascript/",
            description: `JavaScript is the world 
            most popular lightweight, interpreted 
            compiled programming language.`
        }, {
            title: "Java",
            url: 
"https://www.geeksforgeeks.org/java/",
            description: `Java is one of the most 
            popular and widely used programming 
            languages.`
        }];
        $(".ui.search").search({
            source: content,
            fullTextSearch: false,
        });
    

输出：

参考： https://semantic-ui.com/modules/search.html