diff --git a/css/bootstrap-multiselect.css b/css/bootstrap-multiselect.css index d982bd70..e94939d5 100644 --- a/css/bootstrap-multiselect.css +++ b/css/bootstrap-multiselect.css @@ -1 +1 @@ -.multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0}.multiselect-container .input-group{margin:5px}.multiselect-container>li{padding:0}.multiselect-container>li>a.multiselect-all label{font-weight:700}.multiselect-container>li>label.multiselect-group{margin:0;padding:3px 20px;height:100%;font-weight:700}.multiselect-container>li>a{padding:0}.multiselect-container>li>a>label{margin:0;height:100%;cursor:pointer;font-weight:400;padding:3px 20px 3px 40px}.multiselect-container>li>a>label.radio,.multiselect-container>li>a>label.checkbox{margin:0}.multiselect-container>li>a>label>input[type=checkbox]{margin-bottom:5px}.btn-group>.btn-group:nth-child(2)>.multiselect.btn{border-top-left-radius:4px;border-bottom-left-radius:4px}.form-inline .multiselect-container label.checkbox,.form-inline .multiselect-container label.radio{padding:3px 20px 3px 40px}.form-inline .multiselect-container li a label.checkbox input[type=checkbox],.form-inline .multiselect-container li a label.radio input[type=radio]{margin-left:-20px;margin-right:0} \ No newline at end of file +.multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0}.multiselect-container .input-group{margin:5px}.multiselect-container>li{padding:0}.multiselect-container>li>a.multiselect-all label{font-weight:700}.multiselect-container>li>label.multiselect-group{margin:0;padding:3px 20px;height:100%;font-weight:700}.multiselect-container>li>a{padding:0}.multiselect-container>li>a>label{margin:0;height:100%;cursor:pointer;font-weight:400;padding:3px 20px 3px 40px}.multiselect-container>li>a>label.radio,.multiselect-container>li>a>label.checkbox{margin:0}.multiselect-container>li>a>label>input[type=checkbox]{margin-bottom:5px}.btn-group>.btn-group:nth-child(2)>.multiselect.btn{border-top-left-radius:4px;border-bottom-left-radius:4px}.form-inline .multiselect-container label.checkbox,.form-inline .multiselect-container label.radio{padding:3px 20px 3px 40px}.form-inline .multiselect-container li a label.checkbox input[type=checkbox],.form-inline .multiselect-container li a label.radio input[type=radio]{margin-left:-20px;margin-right:0} .multiselect-container .filter .btn{padding: 6px 3px;} .multiselect-container .filter .btn:hover{color: red;} \ No newline at end of file diff --git a/js/bootstrap-multiselect.js b/js/bootstrap-multiselect.js index 3e21e407..be354bc6 100644 --- a/js/bootstrap-multiselect.js +++ b/js/bootstrap-multiselect.js @@ -245,6 +245,7 @@ filterPlaceholder: 'Search', // possible options: 'text', 'value', 'both' filterBehavior: 'text', + includeFilterClearBtn: false, preventInputChangeEvent: false, nonSelectedText: 'None selected', nSelectedText: 'selected', @@ -254,6 +255,7 @@ button: '', ul: '', filter: '
  • ', + filterClearBtn: '', li: '
  • ', divider: '
  • ', liGroup: '
  • ' @@ -673,6 +675,19 @@ this.$filter = $(this.options.templates.filter); $('input', this.$filter).attr('placeholder', this.options.filterPlaceholder); + + // Adds optional filter clear button + if(this.options.includeFilterClearBtn){ + var clearBtn = $(this.options.templates.filterClearBtn); + clearBtn.on('click', $.proxy(function(event){ + clearTimeout(this.searchTimeout); + this.$filter.find('.multiselect-search').val(''); + $('li', this.$ul).show().removeClass("filter-hidden"); + this.updateSelectAll(); + }, this)); + this.$filter.find('.input-group').append(clearBtn); + } + this.$ul.prepend(this.$filter); this.$filter.val(this.query).on('click', function(event) { diff --git a/less/bootstrap-multiselect.less b/less/bootstrap-multiselect.less index 5f735217..c0637d6e 100644 --- a/less/bootstrap-multiselect.less +++ b/less/bootstrap-multiselect.less @@ -52,6 +52,14 @@ } } +.filter .btn { + padding: 6px 3px; +} + +.filter .btn:hover { + color: red; +} + .btn-group > .btn-group:nth-child(2) > .multiselect.btn { border-top-left-radius: 4px; border-bottom-left-radius: 4px;