diff -u b/core/modules/views_ui/css/views_ui.admin.theme.css b/core/modules/views_ui/css/views_ui.admin.theme.css
--- b/core/modules/views_ui/css/views_ui.admin.theme.css
+++ b/core/modules/views_ui/css/views_ui.admin.theme.css
@@ -566,6 +566,9 @@
 .views-filterable-options {
   border-top:  1px solid #ccc;
 }
+.views-filterable-options .filterable-option.odd td {
+  background-color: #f3f4ee;
+}
 .filterable-option .form-item {
   margin-bottom: 0;
   margin-top: 0;
diff -u b/core/modules/views_ui/js/views-admin.js b/core/modules/views_ui/js/views-admin.js
--- b/core/modules/views_ui/js/views-admin.js
+++ b/core/modules/views_ui/js/views-admin.js
@@ -448,7 +448,10 @@
      * Add a keyup handler to the search box.
      */
     this.$searchBox = this.$form.find('[data-drupal-selector="edit-override-controls-options-search"]');
-    this.$searchBox.on('keyup', $.proxy(this.handleKeyup, this));
+    this.$searchBox.on('keyup', $.proxy(this.handlefilter, this));
+
+    this.$filterType = this.$form.find('[data-drupal-selector="edit-override-controls-group"]');
+    this.$filterType.on('change', $.proxy(this.handlefilter, this));
 
     /**
      * Get a list of option labels and their corresponding divs and maintain it
@@ -457,7 +460,7 @@
     this.options = this.getOptions(this.$form.find('.filterable-option'));
 
     // Restripe on initial loading.
-    this.handleKeyup();
+    this.handlefilter();
     // Trap the ENTER key in the search box so that it doesn't submit the form.
     this.$searchBox.on('keypress', function (event) {
       if (event.which === 13) {
@@ -494,23 +497,25 @@
           // Maintain a reference to the jQuery object for each row, so we don't
           // have to create a new object inside the performance-sensitive keyup
           // handler.
-          $div: $option
+          $div: $option,
+          className: $option.context.className
         };
       }
       return options;
     },
 
     /**
-     * Keyup handler for the search box that hides or shows the relevant
+     * Filter handler for the search box and type select that hides or shows the relevant
      * options.
      *
      * @param {jQuery.Event} event
-     *   The keyup event.
+     *   The keyup event or change event.
      */
-    handleKeyup: function (event) {
+    handlefilter: function (event) {
       var found;
       var option;
       var zebraClass;
+      var classes;
 
       // Determine the user's search query. The search text has been converted
       // to lowercase.
@@ -518,6 +523,9 @@
       var words = search.split(' ');
       var wordsLength = words.length;
 
+      // Get selected Group
+      var group = this.$filterType.val();
+
       // Start the counter for restriping rows.
       var zebraCounter = 0;
 
@@ -526,14 +534,24 @@
       for (var i = 0; i < length; i++) {
         // Use a local variable for the option being searched, for performance.
         option = this.options[i];
+        classes = option.className.split(' ');
+
         found = true;
         // Each word in the search string has to match the item in order for the
         // item to be shown.
-        for (var j = 0; j < wordsLength; j++) {
-          if (option.searchText.indexOf(words[j]) === -1) {
+        if (search) {
+          for (var j = 0; j < wordsLength; j++) {
+            if (option.searchText.indexOf(words[j]) === -1) {
+              found = false;
+            }
+          }
+        }
+        if (found && group != 'all') {
+          if (classes.indexOf(group) === -1) {
             found = false;
           }
         }
+
         if (found) {
           zebraClass = (zebraCounter % 2) ? 'odd' : 'even';
           // Show the checkbox row, and restripe it.
@@ -548,6 +566,7 @@
         }
       }
     }
+
   });
 
   /**