语义-UI 搜索对齐变体

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

语义 UI 搜索用于允许用户在网站上搜索不同的内容。搜索可以帮助搜索博客、工具、其他链接等。

Semantic UI Search Aligned Variation 设置结果显示的方向。结果可以默认显示在左侧或右侧。

语义 UI 搜索对齐变体类：

• 左对齐：搜索结果向左显示。
• 右对齐：搜索结果以正确的方向显示。

语法：将左对齐或右对齐类添加到搜索元素以更改搜索结果的方向，如下所示：

    ...

示例：在下面的示例中，我们有一个按钮来使用对齐变化来更改搜索结果的方向。

HTML

  

    
    
    
    
    
    
    

  

    
        
            
                GeeksforGeeks
            
            
                Semantic UI Search Aligned Variation
            
        
  
        
            Welcome to GeeksforGeeks
  
            Find the best programming tutorials here.
  
            
                Change Alignment
            
            
                
                    
                    
                
                
            
        
    
    
        const changeAlignment = () => {
            $('.ui.search').toggleClass('left aligned')
                .toggleClass('right aligned')
        }
        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,
        })
    

  

输出：

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