Improve option generate speed
Now the options are mostly generated by hand before being passed off to jQuery for templating. This fixes much of the speed issues we had when they were entirely being generated through jQuery.
This commit is contained in:
parent
8158e151ff
commit
56dbbf8cdb
56
dist/js/select2.amd.full.js
vendored
56
dist/js/select2.amd.full.js
vendored
@ -261,16 +261,44 @@ define('select2/results',[
|
|||||||
};
|
};
|
||||||
|
|
||||||
Results.prototype.option = function (data) {
|
Results.prototype.option = function (data) {
|
||||||
var $option = $(
|
var attrs = {
|
||||||
'<li class="option" role="treeitem" aria-selected="false"></li>'
|
'class': 'option',
|
||||||
);
|
'role': 'treeitem',
|
||||||
|
'aria-selected': 'false'
|
||||||
|
};
|
||||||
|
|
||||||
|
if (data.disabled) {
|
||||||
|
delete attrs['aria-selected'];
|
||||||
|
attrs['aria-disabled'] = 'true';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.id == null) {
|
||||||
|
delete attrs['aria-selected'];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data._resultId != null) {
|
||||||
|
attrs.id = data._resultId;
|
||||||
|
}
|
||||||
|
|
||||||
if (data.children) {
|
if (data.children) {
|
||||||
$option
|
attrs.role = 'group';
|
||||||
.attr('role', 'group')
|
attrs['aria-label'] = data.text;
|
||||||
.attr('aria-label', data.text)
|
delete attrs['aria-selected'];
|
||||||
.removeAttr('aria-selected');
|
}
|
||||||
|
|
||||||
|
var html = '<li';
|
||||||
|
|
||||||
|
for (var attr in attrs) {
|
||||||
|
var val = attrs[attr];
|
||||||
|
|
||||||
|
html += ' ' + attr + '="' + val + '"';
|
||||||
|
}
|
||||||
|
|
||||||
|
html += '></li>';
|
||||||
|
|
||||||
|
var $option = $(html);
|
||||||
|
|
||||||
|
if (data.children) {
|
||||||
var $label = $('<strong class="group-label"></strong>');
|
var $label = $('<strong class="group-label"></strong>');
|
||||||
this.template(data, $label);
|
this.template(data, $label);
|
||||||
|
|
||||||
@ -294,20 +322,6 @@ define('select2/results',[
|
|||||||
this.template(data, $option);
|
this.template(data, $option);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (data.disabled) {
|
|
||||||
$option
|
|
||||||
.removeAttr('aria-selected')
|
|
||||||
.attr('aria-disabled', 'true');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.id == null) {
|
|
||||||
$option.removeAttr('aria-selected');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data._resultId != null) {
|
|
||||||
$option.attr('id', data._resultId);
|
|
||||||
}
|
|
||||||
|
|
||||||
$option.data('data', data);
|
$option.data('data', data);
|
||||||
|
|
||||||
return $option;
|
return $option;
|
||||||
|
56
dist/js/select2.amd.js
vendored
56
dist/js/select2.amd.js
vendored
@ -261,16 +261,44 @@ define('select2/results',[
|
|||||||
};
|
};
|
||||||
|
|
||||||
Results.prototype.option = function (data) {
|
Results.prototype.option = function (data) {
|
||||||
var $option = $(
|
var attrs = {
|
||||||
'<li class="option" role="treeitem" aria-selected="false"></li>'
|
'class': 'option',
|
||||||
);
|
'role': 'treeitem',
|
||||||
|
'aria-selected': 'false'
|
||||||
|
};
|
||||||
|
|
||||||
|
if (data.disabled) {
|
||||||
|
delete attrs['aria-selected'];
|
||||||
|
attrs['aria-disabled'] = 'true';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.id == null) {
|
||||||
|
delete attrs['aria-selected'];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data._resultId != null) {
|
||||||
|
attrs.id = data._resultId;
|
||||||
|
}
|
||||||
|
|
||||||
if (data.children) {
|
if (data.children) {
|
||||||
$option
|
attrs.role = 'group';
|
||||||
.attr('role', 'group')
|
attrs['aria-label'] = data.text;
|
||||||
.attr('aria-label', data.text)
|
delete attrs['aria-selected'];
|
||||||
.removeAttr('aria-selected');
|
}
|
||||||
|
|
||||||
|
var html = '<li';
|
||||||
|
|
||||||
|
for (var attr in attrs) {
|
||||||
|
var val = attrs[attr];
|
||||||
|
|
||||||
|
html += ' ' + attr + '="' + val + '"';
|
||||||
|
}
|
||||||
|
|
||||||
|
html += '></li>';
|
||||||
|
|
||||||
|
var $option = $(html);
|
||||||
|
|
||||||
|
if (data.children) {
|
||||||
var $label = $('<strong class="group-label"></strong>');
|
var $label = $('<strong class="group-label"></strong>');
|
||||||
this.template(data, $label);
|
this.template(data, $label);
|
||||||
|
|
||||||
@ -294,20 +322,6 @@ define('select2/results',[
|
|||||||
this.template(data, $option);
|
this.template(data, $option);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (data.disabled) {
|
|
||||||
$option
|
|
||||||
.removeAttr('aria-selected')
|
|
||||||
.attr('aria-disabled', 'true');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.id == null) {
|
|
||||||
$option.removeAttr('aria-selected');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data._resultId != null) {
|
|
||||||
$option.attr('id', data._resultId);
|
|
||||||
}
|
|
||||||
|
|
||||||
$option.data('data', data);
|
$option.data('data', data);
|
||||||
|
|
||||||
return $option;
|
return $option;
|
||||||
|
56
dist/js/select2.full.js
vendored
56
dist/js/select2.full.js
vendored
@ -9796,16 +9796,44 @@ define('select2/results',[
|
|||||||
};
|
};
|
||||||
|
|
||||||
Results.prototype.option = function (data) {
|
Results.prototype.option = function (data) {
|
||||||
var $option = $(
|
var attrs = {
|
||||||
'<li class="option" role="treeitem" aria-selected="false"></li>'
|
'class': 'option',
|
||||||
);
|
'role': 'treeitem',
|
||||||
|
'aria-selected': 'false'
|
||||||
|
};
|
||||||
|
|
||||||
|
if (data.disabled) {
|
||||||
|
delete attrs['aria-selected'];
|
||||||
|
attrs['aria-disabled'] = 'true';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.id == null) {
|
||||||
|
delete attrs['aria-selected'];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data._resultId != null) {
|
||||||
|
attrs.id = data._resultId;
|
||||||
|
}
|
||||||
|
|
||||||
if (data.children) {
|
if (data.children) {
|
||||||
$option
|
attrs.role = 'group';
|
||||||
.attr('role', 'group')
|
attrs['aria-label'] = data.text;
|
||||||
.attr('aria-label', data.text)
|
delete attrs['aria-selected'];
|
||||||
.removeAttr('aria-selected');
|
}
|
||||||
|
|
||||||
|
var html = '<li';
|
||||||
|
|
||||||
|
for (var attr in attrs) {
|
||||||
|
var val = attrs[attr];
|
||||||
|
|
||||||
|
html += ' ' + attr + '="' + val + '"';
|
||||||
|
}
|
||||||
|
|
||||||
|
html += '></li>';
|
||||||
|
|
||||||
|
var $option = $(html);
|
||||||
|
|
||||||
|
if (data.children) {
|
||||||
var $label = $('<strong class="group-label"></strong>');
|
var $label = $('<strong class="group-label"></strong>');
|
||||||
this.template(data, $label);
|
this.template(data, $label);
|
||||||
|
|
||||||
@ -9829,20 +9857,6 @@ define('select2/results',[
|
|||||||
this.template(data, $option);
|
this.template(data, $option);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (data.disabled) {
|
|
||||||
$option
|
|
||||||
.removeAttr('aria-selected')
|
|
||||||
.attr('aria-disabled', 'true');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.id == null) {
|
|
||||||
$option.removeAttr('aria-selected');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data._resultId != null) {
|
|
||||||
$option.attr('id', data._resultId);
|
|
||||||
}
|
|
||||||
|
|
||||||
$option.data('data', data);
|
$option.data('data', data);
|
||||||
|
|
||||||
return $option;
|
return $option;
|
||||||
|
4
dist/js/select2.full.min.js
vendored
4
dist/js/select2.full.min.js
vendored
File diff suppressed because one or more lines are too long
56
dist/js/select2.js
vendored
56
dist/js/select2.js
vendored
@ -689,16 +689,44 @@ define('select2/results',[
|
|||||||
};
|
};
|
||||||
|
|
||||||
Results.prototype.option = function (data) {
|
Results.prototype.option = function (data) {
|
||||||
var $option = $(
|
var attrs = {
|
||||||
'<li class="option" role="treeitem" aria-selected="false"></li>'
|
'class': 'option',
|
||||||
);
|
'role': 'treeitem',
|
||||||
|
'aria-selected': 'false'
|
||||||
|
};
|
||||||
|
|
||||||
|
if (data.disabled) {
|
||||||
|
delete attrs['aria-selected'];
|
||||||
|
attrs['aria-disabled'] = 'true';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.id == null) {
|
||||||
|
delete attrs['aria-selected'];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data._resultId != null) {
|
||||||
|
attrs.id = data._resultId;
|
||||||
|
}
|
||||||
|
|
||||||
if (data.children) {
|
if (data.children) {
|
||||||
$option
|
attrs.role = 'group';
|
||||||
.attr('role', 'group')
|
attrs['aria-label'] = data.text;
|
||||||
.attr('aria-label', data.text)
|
delete attrs['aria-selected'];
|
||||||
.removeAttr('aria-selected');
|
}
|
||||||
|
|
||||||
|
var html = '<li';
|
||||||
|
|
||||||
|
for (var attr in attrs) {
|
||||||
|
var val = attrs[attr];
|
||||||
|
|
||||||
|
html += ' ' + attr + '="' + val + '"';
|
||||||
|
}
|
||||||
|
|
||||||
|
html += '></li>';
|
||||||
|
|
||||||
|
var $option = $(html);
|
||||||
|
|
||||||
|
if (data.children) {
|
||||||
var $label = $('<strong class="group-label"></strong>');
|
var $label = $('<strong class="group-label"></strong>');
|
||||||
this.template(data, $label);
|
this.template(data, $label);
|
||||||
|
|
||||||
@ -722,20 +750,6 @@ define('select2/results',[
|
|||||||
this.template(data, $option);
|
this.template(data, $option);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (data.disabled) {
|
|
||||||
$option
|
|
||||||
.removeAttr('aria-selected')
|
|
||||||
.attr('aria-disabled', 'true');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.id == null) {
|
|
||||||
$option.removeAttr('aria-selected');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data._resultId != null) {
|
|
||||||
$option.attr('id', data._resultId);
|
|
||||||
}
|
|
||||||
|
|
||||||
$option.data('data', data);
|
$option.data('data', data);
|
||||||
|
|
||||||
return $option;
|
return $option;
|
||||||
|
2
dist/js/select2.min.js
vendored
2
dist/js/select2.min.js
vendored
File diff suppressed because one or more lines are too long
@ -473,6 +473,15 @@ $.fn.select2.amd.require(
|
|||||||
|
|
||||||
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
|
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
|
||||||
|
|
||||||
|
var data = [];
|
||||||
|
|
||||||
|
for (var i = 0; i < 9999; i++) {
|
||||||
|
data.push({
|
||||||
|
id: i.toString(),
|
||||||
|
text: i
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
var $ajax = $(".js-example-data-ajax");
|
var $ajax = $(".js-example-data-ajax");
|
||||||
|
|
||||||
var $disabledResults = $(".js-example-disabled-results");
|
var $disabledResults = $(".js-example-disabled-results");
|
||||||
|
56
src/js/select2/results.js
vendored
56
src/js/select2/results.js
vendored
@ -107,16 +107,44 @@ define([
|
|||||||
};
|
};
|
||||||
|
|
||||||
Results.prototype.option = function (data) {
|
Results.prototype.option = function (data) {
|
||||||
var $option = $(
|
var attrs = {
|
||||||
'<li class="option" role="treeitem" aria-selected="false"></li>'
|
'class': 'option',
|
||||||
);
|
'role': 'treeitem',
|
||||||
|
'aria-selected': 'false'
|
||||||
|
};
|
||||||
|
|
||||||
|
if (data.disabled) {
|
||||||
|
delete attrs['aria-selected'];
|
||||||
|
attrs['aria-disabled'] = 'true';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.id == null) {
|
||||||
|
delete attrs['aria-selected'];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data._resultId != null) {
|
||||||
|
attrs.id = data._resultId;
|
||||||
|
}
|
||||||
|
|
||||||
if (data.children) {
|
if (data.children) {
|
||||||
$option
|
attrs.role = 'group';
|
||||||
.attr('role', 'group')
|
attrs['aria-label'] = data.text;
|
||||||
.attr('aria-label', data.text)
|
delete attrs['aria-selected'];
|
||||||
.removeAttr('aria-selected');
|
}
|
||||||
|
|
||||||
|
var html = '<li';
|
||||||
|
|
||||||
|
for (var attr in attrs) {
|
||||||
|
var val = attrs[attr];
|
||||||
|
|
||||||
|
html += ' ' + attr + '="' + val + '"';
|
||||||
|
}
|
||||||
|
|
||||||
|
html += '></li>';
|
||||||
|
|
||||||
|
var $option = $(html);
|
||||||
|
|
||||||
|
if (data.children) {
|
||||||
var $label = $('<strong class="group-label"></strong>');
|
var $label = $('<strong class="group-label"></strong>');
|
||||||
this.template(data, $label);
|
this.template(data, $label);
|
||||||
|
|
||||||
@ -140,20 +168,6 @@ define([
|
|||||||
this.template(data, $option);
|
this.template(data, $option);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (data.disabled) {
|
|
||||||
$option
|
|
||||||
.removeAttr('aria-selected')
|
|
||||||
.attr('aria-disabled', 'true');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.id == null) {
|
|
||||||
$option.removeAttr('aria-selected');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data._resultId != null) {
|
|
||||||
$option.attr('id', data._resultId);
|
|
||||||
}
|
|
||||||
|
|
||||||
$option.data('data', data);
|
$option.data('data', data);
|
||||||
|
|
||||||
return $option;
|
return $option;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user