In this post I am going to introduce awesome Jquery Plugin to Create multiple select with select all and search feature using jquery bootstrap multiselect plugin. Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown dropdown menu containing the single options as checkboxes width search feature.
Create multiple select with select all and search feature using jquery bootstrap multiselect plugin
Lets Start Configuration
This plugin dependent on jquery and twitter bootstrap library so need to include both the libraris after that include bootstrap-multiselect.js,bootstrap-multiselect.css.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <link rel="stylesheet" href="bootstrap-multiselect.css" type="text/css"/> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">script> <script type="text/javascript" src="bootstrap-multiselect.js">script> |
Now simply use HTML to create your select input which you want to turn into a multiselect. Remember to set the multiple attribute as to get a real multiselect – but do not worry, the plugin can also be used as usual select without the multiple attribute being present.
First I’ll show you very basic bootstrap multi select box
<select id="multiselect" multiple="multiple"> <option value="India">Indiaoption> <option value="Australia">Australiaoption> <option value="United State">United Stateoption> <option value="Canada">Canadaoption> <option value="Taiwan">Taiwanoption> <option value="Romania">Romaniaoption> select> |
For creating basic multiple select feature in select box, just simply call jqyery multiselect function
<script> $(function() { $('#multiselect').multiselect(); }); script> |
Create bootstrap Multi Select Box With Select All and Search Feature
For creating bootstrap Multi Select Box With Select All and Search Feature you only need to set few properties in jquery multiselect() function like includeSelectAllOption: true, enableFiltering: true, enableCaseInsensitiveFiltering: true see example below.
<script> $(function() { $('#multiselect').multiselect({ includeSelectAllOption: true, enableFiltering: true, enableCaseInsensitiveFiltering: true, filterPlaceholder: 'Search for something...' }); }); script> |
See online Demo and Download Source Code.
For more multi select box properties visit official documentation