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
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