Semantic-UI 搜索流体变化

Semantic UI开源框架提供图标或字形，用于显示与某些元素相关的图片，使用 CSS 和 jQuery，用于创建出色的用户界面。它是一个用于创建漂亮和响应式布局的开发框架。

语义 UI 搜索用于允许用户在网站上搜索不同的内容。搜索可以帮助搜索博客、工具、其他链接等。语义 UI 搜索流体变化使搜索结果能够占据其容器的整个宽度。

语义 UI 搜索流体变体类：

• fluid ：添加此类后，搜索结果会占据其容器的宽度。

语法：将流体选项添加到搜索元素，如下所示：

    ...

示例：在以下示例中，我们搜索流体类型。

HTML

  
    
    
    
    
    
    
    
    
  
  
    
      
        
          
            GeeksforGeeks
          
        
        
          Semantic UI Search Fluid Variation
        
      
      
        Welcome to GeeksforGeeks
        Find the best programming tutorials here.
        
          
            
            
          
          
        
      
    
    
      var tutorials = [
        { title: 'Data Structures' },
        { title: 'Algorithms' },
        { title: 'Machine Learning' },
        { title: 'Web Development' },
        { title: 'Competitive Programming' },
        { title: 'Java' },
        { title: 'C' },
        { title: 'C#' },
        { title: 'C++' },
      ]
      $('.ui.search').search({
        source: tutorials,
      })
    
  

输出：

Semantic-UI 搜索流体变化

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