Semantic-UI Dropdown Multiple Search Selection Type
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;"> w3wiki </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">w3wiki</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