Open In App

Semantic-UI Dropdown Search In-Menu Type

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive website.

Semantic UI Dropdown is used to select the value from the given options. Semantic UI Dropdown Search In-Menu Type is used to create the search prompt dropdown menu to select single or multiple values from the given options. 

Semantic-UI Dropdown Search In-Menu Type Class:

  • dropdown: This class is used to create the dropdown.
  • floating: This class is used to select a single value from the dropdown.
  • multiple: This class is used to create the dropdown to select multiple values.

Syntax:

<div class="ui Search-In-Menu-Type-Class dropdown">
   ...
</div>

Example 1: The following code demonstrates the Semantic-UI Dropdown Search In-Menu Type to select a single value.

HTML




<!DOCTYPE html>
<html>
  
<head>
  <title> Semantic-UI Dropdown Search In-Menu Type </title>
  <link rel="stylesheet" href=
  
  <script src=
  </script>
  <script src=
  </script>
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 class="ui green header"> GeeksforGeeks </h2>  
        <h3> Semantic-UI Dropdown Search In-Menu Type </h3>
  
        <div class="ui floating dropdown labeled icon button">
          <i class="add icon"></i>
          <span class="text"> Select one </span>
          <div class="menu">
            <div class="ui icon search input">
              <i class="search icon"></i>
              <input type="text" placeholder="Search...">
            </div>
  
            <div class="header">
              Topics
            </div>
            <div class="scrolling menu">
              <div class="item">
                C++
              </div>
              <div class="item">
                Java
              </div>
              <div class="item">
                Python
              </div>
              <div class="item">
                Flutter
              </div>
              <div class="item">
                Javascript
              </div>
            </div>
          </div>
        </div>  
    </div><br>
    <script>
        $('.ui.dropdown').dropdown();
    </script>
</body>  
</html>


Output:

Semantic-UI Dropdown Search In-Menu Type

Example 2: The following code demonstrates the Semantic-UI Dropdown Search In-Menu Type to select multiple values.

HTML




<!DOCTYPE html>
<html>
  
<head>
  <title> Semantic-UI Dropdown Search In-Menu Type </title>
  <link rel="stylesheet" href=
  
  <script src=
  </script>
  <script src=
  </script>
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 class="ui green header"> GeeksforGeeks </h2>  
        <h3> Semantic-UI Dropdown Search In-Menu Type </h3>
  
        <div class="ui multiple dropdown">
          <input type="hidden" name="filters">
          <i class="add icon"></i>
          <span class="text"> Select multiple </span>
          <div class="menu">
            <div class="ui icon search input">
              <i class="search icon"></i>
              <input type="text" placeholder="Search...">
            </div>
  
            <div class="header">
              Topics
            </div>
            <div class="scrolling menu">
              <div class="item" data-value="c++">
                <div class="ui green empty circular label"></div>
                C++
              </div>
  
              <div class="item" data-value="java">
                <div class="ui blue empty circular label"></div>
                Java
              </div>
  
              <div class="item" data-value="python">
                <div class="ui black empty circular label"></div>
                Python
              </div>
  
              <div class="item" data-value="flutter">
                <div class="ui purple empty circular label"></div>
                Flutter
              </div>
  
              <div class="item" data-value="javascript">
                <div class="ui red empty circular label"></div>
                Javascript
              </div>
            </div>
          </div>
        </div>  
    </div> <br>
  
  <script>
    $('.ui.dropdown').dropdown();
  </script>
</body>  
</html>


Output:

Semantic-UI Dropdown Search In-Menu Type

Reference: https://semantic-ui.com/modules/dropdown.html#search-in-menu



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