Semantic-UI Dropdown Multiple Search Selection Type

Last Updated : 22 Feb, 2022

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= 
"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> 
    <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>