How to create multi select checkboxes with search feature?

Please give an example to integrate such element in our application.

Here I will show you how you can create a multi select checkbox with search feature using jQuery and bootstrap library and it is a very easy to integrate anywhere in web application. You just need to include bootstrap multi select library and few lines of configurable javascript code in your webpage. You will get that element integrated with many other features as well based on your requirement. Follow the example below for integration process:

 

First include the below libraries in your web page on the top of the page or any common page.

 

 

and then write the html element as below

 

</p> <p><select id="post_categories" name="post_categories[]" multiple="multiple"></p> <p>    <option value="India">India</option></p> <p>    <option value="Australia">Australia</option></p> <p>    <option value="United State">United State</option></p> <p>    <option value="Canada">Canada</option></p> <p>    <option value="Taiwan">Taiwan</option></p> <p>    <option value="Romania">Romania</option></p> <p></select></p> <p>

 

After the writing the above code now keep the below javascript code at bottom of the page.

 

$(document).ready(function() {

    $('#post_categories').multiselect({

        enableClickableOptGroups: true,

        enableCollapsibleOptGroups: true,

        enableFiltering: true,

        includeSelectAllOption: true,

        enableCaseInsensitiveFiltering: true

    });

});

 

 

After successfully writing all the step as defined above you will see a multi select checkbox with search field as below:

 

 

 

 

If you need further detailed documentation about this element click here