Fixed #26561 -- Improved admin's JavaScript SelectBox performance on large lists.

django/contrib/admin/static/admin/js/SelectBox.js

@@ -1,4 +1,4 @@
-(function() {
+(function($) {
     'use strict';
     var SelectBox = {
         cache: {},
@@ -7,8 +7,10 @@
             var node;
             SelectBox.cache[id] = [];
             var cache = SelectBox.cache[id];
-            for (var i = 0, j = box.options.length; i < j; i++) {
-                node = box.options[i];
+            var boxOptions = box.options;
+            var boxOptionsLength = boxOptions.length;
+            for (var i = 0, j = boxOptionsLength; i < j; i++) {
+                node = boxOptions[i];
                 cache.push({value: node.value, text: node.text, displayed: 1});
             }
         },
@@ -16,7 +18,8 @@
             // Repopulate HTML select box from cache
             var box = document.getElementById(id);
             var node;
-            box.options.length = 0; // clear all options
+            $(box).empty(); // clear all options
+            var new_options = box.outerHTML.slice(0, -9);  // grab just the opening tag
             var cache = SelectBox.cache[id];
             for (var i = 0, j = cache.length; i < j; i++) {
                 node = cache[i];
@@ -24,9 +27,11 @@
                     var new_option = new Option(node.text, node.value, false, false);
                     // Shows a tooltip when hovering over the option
                     new_option.setAttribute("title", node.text);
-                    box.options[box.options.length] = new_option;
+                    new_options += new_option.outerHTML;
                 }
             }
+            new_options += '</select>';
+            box.outerHTML = new_options;
         },
         filter: function(id, text) {
             // Redisplay the HTML select box, displaying only the choices containing ALL
@@ -37,11 +42,13 @@
             for (var i = 0, j = cache.length; i < j; i++) {
                 node = cache[i];
                 node.displayed = 1;
+                var node_text = node.text.toLowerCase();
                 var numTokens = tokens.length;
                 for (var k = 0; k < numTokens; k++) {
                     token = tokens[k];
-                    if (node.text.toLowerCase().indexOf(token) === -1) {
+                    if (node_text.indexOf(token) === -1) {
                         node.displayed = 0;
+                        break;  // Once the first token isn't found we're done
                     }
                 }
             }
@@ -57,11 +64,7 @@
                     break;
                 }
             }
-            var k = cache.length - 1;
-            for (i = delete_index; i < k; i++) {
-                cache[i] = cache[i + 1];
-            }
-            cache.length--;
+            cache.splice(delete_index, 1);
         },
         add_to_cache: function(id, option) {
             SelectBox.cache[id].push({value: option.value, text: option.text, displayed: 1});
@@ -82,11 +85,13 @@
             var from_box = document.getElementById(from);
             var option;
             var boxOptions = from_box.options;
-            for (var i = 0, j = boxOptions.length; i < j; i++) {
+            var boxOptionsLength = boxOptions.length;
+            for (var i = 0, j = boxOptionsLength; i < j; i++) {
                 option = boxOptions[i];
-                if (option.selected && SelectBox.cache_contains(from, option.value)) {
-                    SelectBox.add_to_cache(to, {value: option.value, text: option.text, displayed: 1});
-                    SelectBox.delete_from_cache(from, option.value);
+                var option_value = option.value;
+                if (option.selected && SelectBox.cache_contains(from, option_value)) {
+                    SelectBox.add_to_cache(to, {value: option_value, text: option.text, displayed: 1});
+                    SelectBox.delete_from_cache(from, option_value);
                 }
             }
             SelectBox.redisplay(from);
@@ -96,11 +101,13 @@
             var from_box = document.getElementById(from);
             var option;
             var boxOptions = from_box.options;
-            for (var i = 0, j = boxOptions.length; i < j; i++) {
+            var boxOptionsLength = boxOptions.length;
+            for (var i = 0, j = boxOptionsLength; i < j; i++) {
                 option = boxOptions[i];
-                if (SelectBox.cache_contains(from, option.value)) {
-                    SelectBox.add_to_cache(to, {value: option.value, text: option.text, displayed: 1});
-                    SelectBox.delete_from_cache(from, option.value);
+                var option_value = option.value;
+                if (SelectBox.cache_contains(from, option_value)) {
+                    SelectBox.add_to_cache(to, {value: option_value, text: option.text, displayed: 1});
+                    SelectBox.delete_from_cache(from, option_value);
                 }
             }
             SelectBox.redisplay(from);
@@ -126,10 +133,12 @@
         },
         select_all: function(id) {
             var box = document.getElementById(id);
-            for (var i = 0; i < box.options.length; i++) {
-                box.options[i].selected = 'selected';
+            var boxOptions = box.options;
+            var boxOptionsLength = boxOptions.length;
+            for (var i = 0; i < boxOptionsLength; i++) {
+                boxOptions[i].selected = 'selected';
             }
         }
     };
     window.SelectBox = SelectBox;
-})();
+})(django.jQuery);

django/contrib/admin/static/admin/js/SelectFilter2.js

@@ -118,10 +118,21 @@ Requires jQuery, core.js, and SelectBox.js.
             addEvent(filter_input, 'keypress', function(e) { SelectFilter.filter_key_press(e, field_id); });
             addEvent(filter_input, 'keyup', function(e) { SelectFilter.filter_key_up(e, field_id); });
             addEvent(filter_input, 'keydown', function(e) { SelectFilter.filter_key_down(e, field_id); });
-            addEvent(from_box, 'change', function(e) { SelectFilter.refresh_icons(field_id); });
-            addEvent(to_box, 'change', function(e) { SelectFilter.refresh_icons(field_id); });
-            addEvent(from_box, 'dblclick', function() { SelectBox.move(field_id + '_from', field_id + '_to'); SelectFilter.refresh_icons(field_id); });
-            addEvent(to_box, 'dblclick', function() { SelectBox.move(field_id + '_to', field_id + '_from'); SelectFilter.refresh_icons(field_id); });
+            addEvent(selector_div, 'change', function(e) {
+                if (e.target.tagName === 'SELECT') {
+                    SelectFilter.refresh_icons(field_id);
+                }
+            });
+            addEvent(selector_div, 'dblclick', function(e) {
+                if (e.target.tagName === 'OPTION') {
+                    if (e.target.closest('select').id === field_id + '_to') {
+                        SelectBox.move(field_id + '_to', field_id + '_from');
+                    } else {
+                        SelectBox.move(field_id + '_from', field_id + '_to');
+                    }
+                    SelectFilter.refresh_icons(field_id);
+                }
+            });
             addEvent(findForm(from_box), 'submit', function() { SelectBox.select_all(field_id + '_to'); });
             SelectBox.init(field_id + '_from');
             SelectBox.init(field_id + '_to');
@@ -144,14 +155,26 @@ Requires jQuery, core.js, and SelectBox.js.
             // Initial icon refresh
             SelectFilter.refresh_icons(field_id);
         },
+        any_selected: function(field) {
+            var any_selected = false;
+            try {
+                // Temporarily add the required attribute and check validity.
+                // This is much faster in WebKit browsers than the fallback.
+                field.attr('required', 'required');
+                any_selected = field.is(':valid');
+                field.removeAttr('required');
+            } catch (e) {
+                // Browsers that don't support :valid (IE < 10)
+                any_selected = field.find('option:selected').length > 0;
+            }
+            return any_selected;
+        },
         refresh_icons: function(field_id) {
             var from = $('#' + field_id + '_from');
             var to = $('#' + field_id + '_to');
-            var is_from_selected = from.find('option:selected').length > 0;
-            var is_to_selected = to.find('option:selected').length > 0;
             // Active if at least one item is selected
-            $('#' + field_id + '_add_link').toggleClass('active', is_from_selected);
-            $('#' + field_id + '_remove_link').toggleClass('active', is_to_selected);
+            $('#' + field_id + '_add_link').toggleClass('active', SelectFilter.any_selected(from));
+            $('#' + field_id + '_remove_link').toggleClass('active', SelectFilter.any_selected(to));
             // Active if the corresponding box isn't empty
             $('#' + field_id + '_add_all_link').toggleClass('active', from.find('option').length > 0);
             $('#' + field_id + '_remove_all_link').toggleClass('active', to.find('option').length > 0);