Started tests for filter.

dist/js/bootstrap-multiselect.js

@@ -199,6 +199,7 @@
         this.options.onDropdownShown = $.proxy(this.options.onDropdownShown, this);
         this.options.onDropdownHidden = $.proxy(this.options.onDropdownHidden, this);
         this.options.onInitialized = $.proxy(this.options.onInitialized, this);
+        this.options.onFiltering = $.proxy(this.options.onFiltering, this);
 
         // Build select all if enabled.
         this.buildContainer();
@@ -377,6 +378,14 @@
              */
             onInitialized: function($select, $container) {
 
+            },
+            /**
+             * Triggered on filtering.
+             *
+             * @param {jQuery} $filter
+             */
+            onFiltering: function($filter) {
+
             },
             enableHTML: false,
             buttonClass: 'btn btn-default',
@@ -796,7 +805,7 @@
 
                     var visible = true;
                     $inputs.each(function() {
-                        visible = visible && !$(this).hasClass('multiselect-collapsible-hidden');
+                        visible = visible && $(this).is(':visible');
                     });
 
                     if (visible) {
@@ -1102,6 +1111,9 @@
                             if (this.options.enableClickableOptGroups && this.options.multiple) {
                                 this.updateOptGroups();
                             }
+
+                            this.options.onFiltering(event.target);
+
                         }, this), 300, this);
                     }, this));
                 }
@@ -1371,9 +1383,8 @@
             if (this.options.enableClickableOptGroups && this.options.multiple) {
                 this.updateOptGroups();
             }
-            console.log('test')
+
             if (triggerOnDeselectAll) {
-                console.log('test2')
                 this.options.onDeselectAll();
             }
         },

tests/spec/bootstrap-multiselect.js

@@ -1022,6 +1022,82 @@ describe('Bootstrap Multiselect "Select All".', function() {
     });
 });
 
+describe('Bootstrap Multiselect "Filter".', function() {
+
+    function beforeCreate() {
+        // Reset
+        $('#multiselect').multiselect('destroy');
+        $('#multiselect').remove();
+
+        var $select = $('<select id="multiselect" multiple="multiple"></select>');
+
+        for (var i = 1; i < 100; i++) {
+            $select.append('<option value="' + i + '">1</option>');
+        }
+
+        $('body').append($select);
+
+        $select.multiselect({
+            buttonContainer: '<div id="multiselect-container"></div>',
+            enableFiltering: true
+        });
+    }
+
+    function beforeFilterElements() {
+        // Reset
+        $('#multiselect').multiselect('destroy');
+        $('#multiselect').remove();
+
+        var $select = $('<select id="multiselect" multiple="multiple"></select>');
+
+        for (var i = 1; i < 100; i++) {
+            $select.append('<option value="' + i + '">1</option>');
+        }
+
+        $('body').append($select);
+
+        $select.multiselect({
+            buttonContainer: '<div id="multiselect-container"></div>',
+            enableFiltering: true,
+            onFiltering: function($filter) {
+                var val = $($filter).val();
+
+                $('#multiselect-container li input[value!="' + val + '"]').closest('li').each(function() {
+                    expect($(this).is(':visible')).toBe(false);
+                    expect($(this).hasClass('multiselect-filter-hidden')).toBe(true);
+                });
+                $('#multiselect-container li input[value="' + val + '"]').closest('li').each(function() {
+                    expect($(this).is(':visible')).toBe(true);
+                    expect($(this).hasClass('multiselect-filter-hidden')).toBe(false);
+                });
+
+                done();
+            }
+        });
+    }
+
+    it('Should create filter.', function() {
+        beforeCreate();
+
+        expect($('#multiselect-container li.multiselect-filter').length).toBe(1);
+        expect($('#multiselect-container li.multiselect-filter input').length).toBe(1);
+    });
+
+    it('Should filter elements.', function() {
+        beforeFilterElements();
+
+        $('#multiselect-container li.multiselect-filter input').val('11').trigger('keydown');
+
+        // Expectations are in onFiltering.
+        expect(true).toBe(true);
+    });
+
+    afterEach(function() {
+        $('#multiselect').multiselect('destroy');
+        $('#multiselect').remove();
+    });
+});
+
 describe('Bootstrap Multiselect Specific Issues.', function() {
 
     it('#393', function() {