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.
<!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>
Output:
