Semantic-UI Search Aligned Variation

Last Updated : 24 Feb, 2022

Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts.

Semantic UI Search is used to allow the user to search different things on the website. The search can help to search blogs, tools, other links, etc.

Semantic UI Search Aligned Variation sets the direction of the results where they will be displayed. The results can either be displayed on left by default or right direction.

Semantic UI Search Aligned Variation Classes:

left aligned: The search results are displayed in the left direction.
right aligned: The search results are displayed in the right direction.

Syntax: Add either left or right aligned class to the search element to change the direction of search results as follows:

<div class="ui right aligned search">
    ...
</div>

Example: In the following example, we have a button to change the direction of the search results using the alignment variation.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="ui container"> 
        <center> 
            <div class="ui header green"> 
                <h1>GeeksforGeeks</h1> 
            </div> 
            <strong> 
                Semantic UI Search Aligned Variation 
            </strong> 
        </center> 
  
        <div class="ui segment"> 
            <h1>Welcome to GeeksforGeeks</h1> 
  
            <p>Find the best programming tutorials here.</p> 
  
            <button class="ui button" onclick="changeAlignment()"> 
                Change Alignment 
            </button> 
            <div class="ui right aligned search"> 
                <div class="ui icon input"> 
                    <input class="prompt" type="text" 
                        placeholder="Search tutorials..." /> 
                    <i class="search icon"></i> 
                </div> 
                <div class="results"></div> 
            </div> 
        </div> 
    </div> 
    <script> 
        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, 
        }) 
    </script> 
</body> 
  
</html> 