Create multiple select with select all and search feature using jquery bootstrap multiselect plugin

by Posted on

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.
bootstrap-multi-select


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">India</option>
    <option value="Australia">Australia</option>
    <option value="United State">United State</option>
    <option value="Canada">Canada</option>
    <option value="Taiwan">Taiwan</option>
    <option value="Romania">Romania</option>
</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.

DEMO | DOWNLOAD

For more multi select box properties visit official documentation



Published by admin