Monday, December 19, 2016

Boostrap MultiSlect - Part 3

Some Configuration options in Boostrap Multiselect

Include Select All option in the select list 

includeSelectAllOption

We can add a feature to enable select all options at once in the select list by adding 
includeSelectAllOption option into true. 

<script type="text/javascript">
    $(document).ready(function() {

        $('#exampleThree').multiselect({

            includeSelectAllOption: true
            
        });
    });
</script>



Filtering the options in the select list

enableFiltering

We can filter options by setting enableFiltering option into true in the javascript 
code section.

<script type="text/javascript">
    $(document).ready(function() {

        $('#exampleThree').multiselect({

            enableFiltering: true

        });
    });
</script>

enableCaseInsensitiveFiltering 

The filter as configured above will use case sensitive filtering, by setting enableCaseInsensitiveFiltering to true this behavior can be changed to 
use case insensitive filtering.

<script type="text/javascript">
    $(document).ready(function() {

        $('#exampleThree').multiselect({

          enableCaseInsensitiveFiltering: true

        });
    });
</script>

enableFullValueFiltering

We can set enableFullValueFiltering to true to enable full value filtering, that is all options are shown where the query is a prefix of. 

<script type="text/javascript">
    $(document).ready(function() {

        $('#example-enableFullValueFiltering').multiselect({

            enableFiltering: true,
            enableFullValueFiltering: true

        });
    });

</script>

filterBehavior

The options are filtered based on their text. This behavior can be changed to use the value of the options or both the text and the value.

<script type="text/javascript">
    $(document).ready(function() {

        $('#exampleThree').multiselect({

            enableFiltering: true,
            filterBehavior: 'value'

        });
    });

</script>

filterPlaceholder

The placeholder used for filter input. 

<script type="text/javascript">
    $(document).ready(function() {
        $('#exampleThree').multiselect({

            enableFiltering: true,
            filterPlaceholder: 'Search for something...'

        });
    });

</script>

No comments:

Post a Comment