Skip to content

Commit 8ecc35d

Browse files
kevin-brownkevin-brown
committed
Fix caching when querying
This fixes caching when querying, so the data object no longer needs to be completely regenerated whenever the `<option>` is queried. While this does not fix the speed issues on the first opening of the instance, it does fix the speed issues during searching.
1 parent 05ddbec commit 8ecc35d

9 files changed

Lines changed: 183 additions & 158 deletions

File tree

‎dist/js/select2.amd.full.js‎

Lines changed: 36 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -261,8 +261,10 @@ define('select2/results',[
261261
};
262262

263263
Results.prototype.option = function (data) {
264+
var option = document.createElement('li');
265+
option.className = 'option';
266+
264267
var attrs = {
265-
'class': 'option',
266268
'role': 'treeitem',
267269
'aria-selected': 'false'
268270
};
@@ -277,7 +279,7 @@ define('select2/results',[
277279
}
278280

279281
if (data._resultId != null) {
280-
attrs.id = data._resultId;
282+
option.id = data._resultId;
281283
}
282284

283285
if (data.children) {
@@ -286,21 +288,15 @@ define('select2/results',[
286288
delete attrs['aria-selected'];
287289
}
288290

289-
var html = '<li';
290-
291-
for (var attr in attrs) {
292-
var val = attrs[attr];
293-
294-
html += ' ' + attr + '="' + val + '"';
295-
}
296-
297-
html += '></li>';
298-
299-
var $option = $(html);
291+
var $option = $(option);
292+
$option.attr(attrs);
300293

301294
if (data.children) {
302-
var $label = $('<strong class="group-label"></strong>');
303-
this.template(data, $label);
295+
var label = document.createElement('strong');
296+
label.className = 'group-label';
297+
298+
var $label = $(label);
299+
this.template(data, label);
304300

305301
var $children = [];
306302

@@ -316,10 +312,10 @@ define('select2/results',[
316312

317313
$childrenContainer.append($children);
318314

319-
$option.append($label);
315+
$option.append(label);
320316
$option.append($childrenContainer);
321317
} else {
322-
this.template(data, $option);
318+
this.template(data, option);
323319
}
324320

325321
$option.data('data', data);
@@ -543,10 +539,10 @@ define('select2/results',[
543539
}
544540
};
545541

546-
Results.prototype.template = function (result, $container) {
542+
Results.prototype.template = function (result, container) {
547543
var template = this.options.get('templateResult');
548544

549-
$container.html(template(result));
545+
container.innerHTML = template(result);
550546
};
551547

552548
return Results;
@@ -1125,12 +1121,10 @@ define('select2/data/select',[
11251121
SelectAdapter.prototype.item = function ($option) {
11261122
var data = {};
11271123

1128-
if ($.hasData($option)) {
1129-
data = $option.data('data');
1124+
data = $option.data('data');
11301125

1131-
if (data != null) {
1132-
return data;
1133-
}
1126+
if (data != null) {
1127+
return data;
11341128
}
11351129

11361130
if ($option.is('option')) {
@@ -1811,33 +1805,44 @@ define('select2/defaults',[
18111805

18121806
Defaults.prototype.reset = function () {
18131807
function matcher (params, data) {
1814-
var match = $.extend(true, {}, data);
1808+
// Always return the object if there is nothing to compare
1809+
if ($.trim(params.term) === '') {
1810+
return data;
1811+
}
18151812

1816-
if (data.children) {
1813+
// Do a recursive check for options with children
1814+
if (data.children && data.children.length > 0) {
1815+
// Clone the data object if there are children
1816+
// This is required as we modify the object to remove any non-matches
1817+
var match = $.extend(true, {}, data);
1818+
1819+
// Check each child of the option
18171820
for (var c = data.children.length - 1; c >= 0; c--) {
18181821
var child = data.children[c];
18191822

18201823
var matches = matcher(params, child);
18211824

18221825
// If there wasn't a match, remove the object in the array
1823-
if (matches === null) {
1826+
if (matches == null) {
18241827
match.children.splice(c, 1);
18251828
}
18261829
}
18271830

1831+
// If any children matched, return the new object
18281832
if (match.children.length > 0) {
18291833
return match;
18301834
}
1831-
}
18321835

1833-
if ($.trim(params.term) === '') {
1834-
return match;
1836+
// If there were no matching children, check just the plain object
1837+
return matcher(params, match);
18351838
}
18361839

1840+
// Check if the text contains the term
18371841
if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) > -1) {
1838-
return match;
1842+
return data;
18391843
}
18401844

1845+
// If it doesn't contain the term, don't return anything
18411846
return null;
18421847
}
18431848

‎dist/js/select2.amd.js‎

Lines changed: 36 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -261,8 +261,10 @@ define('select2/results',[
261261
};
262262

263263
Results.prototype.option = function (data) {
264+
var option = document.createElement('li');
265+
option.className = 'option';
266+
264267
var attrs = {
265-
'class': 'option',
266268
'role': 'treeitem',
267269
'aria-selected': 'false'
268270
};
@@ -277,7 +279,7 @@ define('select2/results',[
277279
}
278280

279281
if (data._resultId != null) {
280-
attrs.id = data._resultId;
282+
option.id = data._resultId;
281283
}
282284

283285
if (data.children) {
@@ -286,21 +288,15 @@ define('select2/results',[
286288
delete attrs['aria-selected'];
287289
}
288290

289-
var html = '<li';
290-
291-
for (var attr in attrs) {
292-
var val = attrs[attr];
293-
294-
html += ' ' + attr + '="' + val + '"';
295-
}
296-
297-
html += '></li>';
298-
299-
var $option = $(html);
291+
var $option = $(option);
292+
$option.attr(attrs);
300293

301294
if (data.children) {
302-
var $label = $('<strong class="group-label"></strong>');
303-
this.template(data, $label);
295+
var label = document.createElement('strong');
296+
label.className = 'group-label';
297+
298+
var $label = $(label);
299+
this.template(data, label);
304300

305301
var $children = [];
306302

@@ -316,10 +312,10 @@ define('select2/results',[
316312

317313
$childrenContainer.append($children);
318314

319-
$option.append($label);
315+
$option.append(label);
320316
$option.append($childrenContainer);
321317
} else {
322-
this.template(data, $option);
318+
this.template(data, option);
323319
}
324320

325321
$option.data('data', data);
@@ -543,10 +539,10 @@ define('select2/results',[
543539
}
544540
};
545541

546-
Results.prototype.template = function (result, $container) {
542+
Results.prototype.template = function (result, container) {
547543
var template = this.options.get('templateResult');
548544

549-
$container.html(template(result));
545+
container.innerHTML = template(result);
550546
};
551547

552548
return Results;
@@ -1125,12 +1121,10 @@ define('select2/data/select',[
11251121
SelectAdapter.prototype.item = function ($option) {
11261122
var data = {};
11271123

1128-
if ($.hasData($option)) {
1129-
data = $option.data('data');
1124+
data = $option.data('data');
11301125

1131-
if (data != null) {
1132-
return data;
1133-
}
1126+
if (data != null) {
1127+
return data;
11341128
}
11351129

11361130
if ($option.is('option')) {
@@ -1811,33 +1805,44 @@ define('select2/defaults',[
18111805

18121806
Defaults.prototype.reset = function () {
18131807
function matcher (params, data) {
1814-
var match = $.extend(true, {}, data);
1808+
// Always return the object if there is nothing to compare
1809+
if ($.trim(params.term) === '') {
1810+
return data;
1811+
}
18151812

1816-
if (data.children) {
1813+
// Do a recursive check for options with children
1814+
if (data.children && data.children.length > 0) {
1815+
// Clone the data object if there are children
1816+
// This is required as we modify the object to remove any non-matches
1817+
var match = $.extend(true, {}, data);
1818+
1819+
// Check each child of the option
18171820
for (var c = data.children.length - 1; c >= 0; c--) {
18181821
var child = data.children[c];
18191822

18201823
var matches = matcher(params, child);
18211824

18221825
// If there wasn't a match, remove the object in the array
1823-
if (matches === null) {
1826+
if (matches == null) {
18241827
match.children.splice(c, 1);
18251828
}
18261829
}
18271830

1831+
// If any children matched, return the new object
18281832
if (match.children.length > 0) {
18291833
return match;
18301834
}
1831-
}
18321835

1833-
if ($.trim(params.term) === '') {
1834-
return match;
1836+
// If there were no matching children, check just the plain object
1837+
return matcher(params, match);
18351838
}
18361839

1840+
// Check if the text contains the term
18371841
if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) > -1) {
1838-
return match;
1842+
return data;
18391843
}
18401844

1845+
// If it doesn't contain the term, don't return anything
18411846
return null;
18421847
}
18431848

0 commit comments

Comments
 (0)