Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

Semantic-UI Dropdown Multiple Search Selection Type

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic UI dropdown allows a user to select a value from a series of options. Semantic-UI Dropdown offers us 11 types of dropdown and 3types of content Header, divider, and icon. In this article, we will learn about Multiple Search Selection Types.

Semantic-UI Dropdown Multiple Search Selection Type is used for creating a select dropdown that allows multiple search selections.

Semantic-UI Dropdown Multiple Search Selection Type Class: There is no predefined class for the multiple search selection. But for that, we can use an attribute multiple=””,

without value.

Syntax:

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

Example: The below example illustrates the Semantic-UI Dropdown Multiple Search Selection Type.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
          rel="stylesheet" />
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <center>
        <div class="ui container">
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
            <h3>Semantic-UI Dropdown Multiple Search Selection Type</h3>
            <select class="ui fluid search dropdown" multiple="">
                <option value="">Company Name</option>
                <option value="AL">GeeksforGeeks</option>
                <option value="AK">Apple</option>
                <option value="AZ">Amazon</option>
            </select>
        </div>
        <script>
            $('.ui.dropdown').dropdown();
        </script>
    </center>
</body>
  
</html>

Output:

Semantic-UI Dropdown Multiple Search Selection Type

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


My Personal Notes arrow_drop_up
Last Updated : 22 Feb, 2022
Like Article
Save Article
Similar Reads
Related Tutorials