Skip to content

Commit d2564a0

Browse files
risadamsrisadams
committed
slight performance tweaks on instances with large item counts
1 parent 78e368b commit d2564a0

File tree

4 files changed

+167
-107
lines changed

4 files changed

+167
-107
lines changed

‎dist/js/selectize.js

Lines changed: 56 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1398,8 +1398,15 @@ $.extend(Selectize.prototype, {
13981398

13991399
// store original children and tab index so that they can be
14001400
// restored when the destroy() method is called.
1401-
this.revertSettings = {
1402-
$children : $input.children().detach(),
1401+
// Detach children outside of DOM to prevent slowdown on large selects
1402+
var inputPlaceholder = $('<div></div>');
1403+
var inputChildren = $input.children().detach();
1404+
1405+
$input.replaceWith(inputPlaceholder);
1406+
inputPlaceholder.replaceWith($input);
1407+
1408+
this.revertSettings = {
1409+
$children : inputChildren,
14031410
tabindex : $input.attr('tabindex')
14041411
};
14051412

@@ -3858,6 +3865,53 @@ $.fn.selectize.support = {
38583865
validity: SUPPORTS_VALIDITY_API
38593866
};
38603867

3868+
/**
3869+
* Plugin: "autofill_disable" (selectize.js)
3870+
* Copyright (c) 2013 Brian Reavis & contributors
3871+
* Copyright (c) 2020-2022 Selectize Team & contributors
3872+
*
3873+
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
3874+
* file except in compliance with the License. You may obtain a copy of the License at:
3875+
* http://www.apache.org/licenses/LICENSE-2.0
3876+
*
3877+
* Unless required by applicable law or agreed to in writing, software distributed under
3878+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
3879+
* ANY KIND, either express or implied. See the License for the specific language
3880+
* governing permissions and limitations under the License.
3881+
*
3882+
* @author Ris Adams <[email protected]>
3883+
*/
3884+
3885+
Selectize.define("autofill_disable", function (options) {
3886+
var self = this;
3887+
3888+
self.setup = (function () {
3889+
var original = self.setup;
3890+
return function () {
3891+
original.apply(self, arguments);
3892+
3893+
// https://stackoverflow.com/questions/30053167/autocomplete-off-vs-false
3894+
self.$control_input.attr({ autocomplete: "new-password", autofill: "no" });
3895+
};
3896+
})();
3897+
});
3898+
3899+
Selectize.define('auto_select_on_type', function(options) {
3900+
var self = this;
3901+
3902+
self.onBlur = (function() {
3903+
var originalBlur = self.onBlur;
3904+
return function(e) {
3905+
var $matchedItem = self.getFirstItemMatchedByTextContent(self.lastValue, true);
3906+
if (typeof $matchedItem.attr('data-value') !== 'undefined' && self.getValue() !== $matchedItem.attr('data-value'))
3907+
{
3908+
self.setValue($matchedItem.attr('data-value'));
3909+
}
3910+
return originalBlur.apply(this, arguments);
3911+
}
3912+
}());
3913+
});
3914+
38613915
Selectize.define("auto_position", function () {
38623916
var self = this;
38633917

@@ -3902,53 +3956,6 @@ Selectize.define("auto_position", function () {
39023956
}());
39033957
});
39043958

3905-
Selectize.define('auto_select_on_type', function(options) {
3906-
var self = this;
3907-
3908-
self.onBlur = (function() {
3909-
var originalBlur = self.onBlur;
3910-
return function(e) {
3911-
var $matchedItem = self.getFirstItemMatchedByTextContent(self.lastValue, true);
3912-
if (typeof $matchedItem.attr('data-value') !== 'undefined' && self.getValue() !== $matchedItem.attr('data-value'))
3913-
{
3914-
self.setValue($matchedItem.attr('data-value'));
3915-
}
3916-
return originalBlur.apply(this, arguments);
3917-
}
3918-
}());
3919-
});
3920-
3921-
/**
3922-
* Plugin: "autofill_disable" (selectize.js)
3923-
* Copyright (c) 2013 Brian Reavis & contributors
3924-
* Copyright (c) 2020-2022 Selectize Team & contributors
3925-
*
3926-
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
3927-
* file except in compliance with the License. You may obtain a copy of the License at:
3928-
* http://www.apache.org/licenses/LICENSE-2.0
3929-
*
3930-
* Unless required by applicable law or agreed to in writing, software distributed under
3931-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
3932-
* ANY KIND, either express or implied. See the License for the specific language
3933-
* governing permissions and limitations under the License.
3934-
*
3935-
* @author Ris Adams <[email protected]>
3936-
*/
3937-
3938-
Selectize.define("autofill_disable", function (options) {
3939-
var self = this;
3940-
3941-
self.setup = (function () {
3942-
var original = self.setup;
3943-
return function () {
3944-
original.apply(self, arguments);
3945-
3946-
// https://stackoverflow.com/questions/30053167/autocomplete-off-vs-false
3947-
self.$control_input.attr({ autocomplete: "new-password", autofill: "no" });
3948-
};
3949-
})();
3950-
});
3951-
39523959
/**
39533960
* Plugin: "clear_button" (selectize.js)
39543961
* Copyright (c) 2013 Brian Reavis & contributors

‎dist/js/selectize.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/performance.html

Lines changed: 100 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,58 +2,104 @@
22
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
33
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
44
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
5-
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
6-
<head>
7-
<meta charset="utf-8">
8-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9-
<title>Selectize.js Demo</title>
10-
<meta name="description" content="">
11-
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
12-
<link rel="stylesheet" href="css/normalize.css">
13-
<link rel="stylesheet" href="css/stylesheet.css">
14-
<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
15-
<script src="js/jquery.min.js"></script>
16-
<script src="../dist/js/selectize.js"></script>
17-
<script src="js/index.js"></script>
18-
</head>
19-
<body>
20-
<div id="wrapper">
21-
<h1>Selectize.js</h1>
22-
<div class="demo">
23-
<h2>Performance</h2>
24-
<p>This shows how it performs with 25,000 items.</p>
25-
<div class="control-group">
26-
<label for="select-junk">Jumbled Mess:</label>
27-
<select id="select-junk" placeholder="Start Typing..."></select>
28-
</div>
29-
<script>
30-
// <select id="select-junk"></select>
31-
32-
var letters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUV';
33-
var options = [];
34-
for (var i = 0; i < 25000; i++) {
35-
var title = [];
36-
for (var j = 0; j < 8; j++) {
37-
title.push(letters.charAt(Math.round((letters.length - 1) * Math.random())));
38-
}
39-
options.push({
40-
id: i,
41-
title: title.join('')
42-
});
43-
}
44-
45-
$('#select-junk').selectize({
46-
maxItems: null,
47-
maxOptions: 100,
48-
valueField: 'id',
49-
labelField: 'title',
50-
searchField: 'title',
51-
sortField: 'title',
52-
options: options,
53-
create: false
54-
});
55-
</script>
56-
</div>
57-
</div>
58-
</body>
5+
<!--[if gt IE 8]><!-->
6+
<html class="no-js">
7+
<!--<![endif]-->
8+
9+
<head>
10+
<meta charset="utf-8">
11+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
12+
<title>Selectize.js Demo</title>
13+
<meta name="description" content="">
14+
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
15+
<link rel="stylesheet" href="css/normalize.css">
16+
<link rel="stylesheet" href="css/stylesheet.css">
17+
<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
18+
<script src="js/jquery.min.js"></script>
19+
<script src="../dist/js/selectize.js"></script>
20+
<script src="js/index.js"></script>
21+
</head>
22+
23+
<body>
24+
<div id="wrapper">
25+
<h1>Selectize.js</h1>
26+
<div class="demo">
27+
<h2>Performance</h2>
28+
<p>This shows how it performs with 25,000 items.</p>
29+
<div class="control-group">
30+
<label for="select-junk">Jumbled Mess:</label>
31+
<select id="select-junk" placeholder="Start Typing..."></select>
32+
</div>
33+
<script>
34+
// <select id="select-junk"></select>
35+
36+
var letters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUV';
37+
var options = [];
38+
for (var i = 0; i < 25000; i++) {
39+
var title = [];
40+
for (var j = 0; j < 8; j++) {
41+
title.push(letters.charAt(Math.round((letters.length - 1) * Math.random())));
42+
}
43+
options.push({
44+
id: i,
45+
title: title.join('')
46+
});
47+
}
48+
49+
$('#select-junk').selectize({
50+
maxItems: null,
51+
maxOptions: 100,
52+
valueField: 'id',
53+
labelField: 'title',
54+
searchField: 'title',
55+
sortField: 'title',
56+
options: options,
57+
create: false
58+
});
59+
</script>
60+
</div>
61+
62+
<div class="demo">
63+
<h2>Digestion of many children</h2>
64+
65+
<button type="button" class="activate" id="select-children-load">Load</button>
66+
<button type="button" class="activate" id="select-children-activate">Selectize</button>
67+
68+
<div class="control-group">
69+
<select id="select-children"></select>
70+
</div>
71+
72+
<script>
73+
// <select id="select-children"></select>
74+
var letters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUV';
75+
var children = [];
76+
77+
$('#select-children-load').click(function () {
78+
for (var i = 0; i < 12000; i++) {
79+
var title = [];
80+
81+
for (var j = 0; j < 8; j++) {
82+
title.push(letters.charAt(Math.round((letters.length - 1) * Math.random())));
83+
}
84+
85+
title = title.join('');
86+
87+
var node = $('<option>', { text: title, value: title });
88+
children.push(node);
89+
}
90+
91+
$('#select-children').append(children);
92+
});
93+
94+
$('#select-children-activate').click(function () {
95+
$('#select-children').selectize({
96+
maxItems: null,
97+
create: true
98+
});
99+
});
100+
</script>
101+
</div>
102+
</div>
103+
</body>
104+
59105
</html>

‎src/selectize.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -239,8 +239,15 @@ $.extend(Selectize.prototype, {
239239

240240
// store original children and tab index so that they can be
241241
// restored when the destroy() method is called.
242-
this.revertSettings = {
243-
$children : $input.children().detach(),
242+
// Detach children outside of DOM to prevent slowdown on large selects
243+
var inputPlaceholder = $('<div></div>');
244+
var inputChildren = $input.children().detach();
245+
246+
$input.replaceWith(inputPlaceholder);
247+
inputPlaceholder.replaceWith($input);
248+
249+
this.revertSettings = {
250+
$children : inputChildren,
244251
tabindex : $input.attr('tabindex')
245252
};
246253

0 commit comments

Comments
 (0)