Semantic-UI Search Dropdown Type

Last Updated : 23 Feb, 2022

Semantic-UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap. In this article let us see the buttons of basic type.

Semantic-UI Search Dropdown Type provides different built-in classes for the dropdown menus which are very handy while making the navigation bars on the websites also they were very useful in the forms which may have multiple choices. In this article, we will see about the dropdown of search type.

Search dropdown enables us to search for an option.

Semantic UI dropdown search type classes:

dropdown: This class indicates that a dropdown menu is needed.
search: This class enables us to search for an option in the dropdown.

Syntax:

 <div class="ui ...search dropdown">
    ...
 </div>

Example 1: The following code demonstrates the search drop-down type.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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"
        integrity= 
        "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 class="ui green header">Geeksforgeeks</h1> 
        <strong>Semantic UI Search Dropdown Type</strong> 
        <br /> 
        <br /> 
        <div class="ui dropdown labeled search icon button"> 
            <input type="hidden" name="webdev"> 
            <i class="search icon"></i> 
            <div class="default text">COURSES AVAILABLE</div> 
            <div class="menu"> 
                <div class="item" data-value="0"> 
                    WEB-DEVELOPMENT 
                </div> 
                <div class="item" data-value="1"> 
                    ANDROID-DEVELOPMENT 
                </div> 
                <div class="item" data-value="2"> 
                    MACHINE LEARNING 
                </div> 
                <div class="item" data-value="3"> 
                    DATA STRUCTURES AND ALGORITHMS 
                </div> 
                <div class="item" data-value="4"> 
                    COMPETITIVE PROGRAMMING 
                </div> 
                <div class="item" data-value="5"> 
                    MATHEMATICS 
                </div> 
            </div> 
        </div> 
    </center> 
      
    <script> 
        $('.ui.dropdown').dropdown(); 
    </script> 
</body> 
  
</html>

Output:

Example 2: The following code demonstrates the search drop-down type.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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"
        integrity= 
        "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 class="ui green header">Geeksforgeeks</h1> 
        <strong>Semantic UI Search Selection Dropdown Type</strong> 
        <br /><br /> 
          
        <select class="ui search dropdown"> 
            <option value="">Select Languages</option> 
            <option value="C">C</option> 
            <option value="CPP">C++</option> 
            <option value="Java">Java</option> 
            <option value="Python">Python</option> 
            <option value="C#">C#</option> 
            <option value="JS">JavaScript</option> 
        </select> 
    </center> 
  
    <script> 
        $('.ui.dropdown').dropdown(); 
    </script> 
</body> 
  
</html>