Open In App

Semantic-UI Dropdown Search Selection Type

Improve
Improve
Like Article
Like
Save
Share
Report

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. 

Semantic UI provides different built-in classes for the dropdown menus which are very handy while making the navigation bars on the websites. In this article let us see about the dropdown of search selection types. A search selection type of dropdown helps the user to search from a large list of choices.

Semantic UI dropdown search selection type classes:

  • search selection: This class enables us to search for an option from the select dropdown list. The selection class is not required if we are using a select HTML tag otherwise it is required to mention as the class.

Syntax:

<div class="ui ...search selection dropdown">
  <div class="menu">
      <div class="item">...</div>
      ...
  </div> 
</div>

Or:

<select class="ui search dropdown">
   <option value="">....</option>
   ....
</select>

Example 1: The following code demonstrates the dropdown search selection type.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
         rel="stylesheet" />
    <script src=
            integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
            crossorigin="anonymous">
    </script>
    <script src=
    </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 selection 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>


Output:

Semantic-UI Dropdown Search Selection Type

Semantic-UI Dropdown Search Selection Type

Example 2: The following code demonstrates the search dropdown by setting some data attributes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
         rel="stylesheet" />
    <script src=
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
       crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 class="ui green header">Geeksforgeeks</h1>
        <strong>Semantic UI Search Selection Dropdown Type</strong>
        <br />
        <br />
        <div class="ui search selection dropdown">
            <input type="hidden" name="colours">
            <i class="dropdown icon"></i>
            <div class="default text">Choose Colour</div>
            <div class="menu">
                <div class="item" data-value="b">Blue</div>
                <div class="item" data-value="blk">Black</div>
                <div class="item" data-value="wht">White</div>
                <div class="item" data-value="br">Brown</div>
                <div class="item" data-value="Vi">Violet</div>
                <div class="item" data-value="r">Red</div>
            </div>
        </div>
    </center>
    <script>
        $('.ui.dropdown').dropdown();
    </script>
</body>


Output:

Semantic-UI Dropdown Search Selection Type

Semantic-UI Dropdown Search Selection Type

Reference link: https://semantic-ui.com/modules/dropdown.html#search-selection



Last Updated : 21 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads