1
0
mirror of synced 2024-11-22 13:06:08 +03:00

Added optgroup support

This commit is contained in:
Kevin Brown 2014-10-14 22:30:37 -04:00
parent fd5603be11
commit acd469c658
12 changed files with 483 additions and 77 deletions

View File

@ -88,9 +88,15 @@
.select2-container.select2-theme-default .dropdown .results {
max-height: 200px;
overflow-y: scroll; }
.select2-container.select2-theme-default .dropdown .results .options .option.group {
padding: 0; }
.select2-container.select2-theme-default .dropdown .results .options .option.group .group-label {
cursor: default;
display: block;
padding: 6px; }
.select2-container.select2-theme-default .dropdown .results .options .option.selected {
background-color: #ddd; }
.select2-container.select2-theme-default .dropdown .results .options .option.highlighted {
.select2-container.select2-theme-default .dropdown .results .options .option.highlightable.highlighted {
background-color: #5897fb;
color: white; }

View File

@ -1 +1 @@
.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle;}.select2-container .selection .single-select{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none;}.select2-container .selection .single-select .rendered-selection{display:block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-container .selection .multiple-select{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none;}.select2-container .selection .multiple-select .rendered-selection{display:block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-container .dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:100;}.select2-container .dropdown .results{display:block;}.select2-container .dropdown .results .options{list-style:none;margin:0;padding:0;}.select2-container .dropdown .results .options .option{cursor:pointer;padding:6px;user-select:none;-webkit-user-select:none;}.select2-container.open .dropdown{border-top:none;border-top-left-radius:0;border-top-right-radius:0;left:0;}.select2-container.select2-theme-default .selection .single-select{background-color:#eee;border:1px solid #aaa;border-radius:4px;}.select2-container.select2-theme-default .selection .single-select .rendered-selection{color:#444;line-height:28px;}.select2-container.select2-theme-default .selection .multiple-select{background-color:white;border:1px solid #aaa;border-radius:4px;}.select2-container.select2-theme-default .selection .multiple-select .rendered-selection{list-style:none;margin:0;padding:5px;padding-bottom:0;}.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;float:left;margin-right:5px;margin-bottom:5px;padding:0 5px;}.select2-container.select2-theme-default.open .selection .single-select,.select2-container.select2-theme-default.open .selection .multiple-select{border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container.select2-theme-default .dropdown .results{max-height:200px;overflow-y:scroll;}.select2-container.select2-theme-default .dropdown .results .options .option.selected{background-color:#ddd;}.select2-container.select2-theme-default .dropdown .results .options .option.highlighted{background-color:#5897fb;color:white;}.s2-container{margin:0;position:relative;zoom:1;vertical-align:middle;}.s2-container.s2-active{border:1px solid #5897fb;border-top:bottom;}.s2-container .s2-single-select{display:block;height:26px;padding:0 0 0 8px;overflow:hidden;position:relative;border:1px solid #aaa;white-space:nowrap;line-height:26px;color:#444;text-decoration:none;border-radius:4px;background-clip:padding-box;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#fff;background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));background-image:-webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);background-image:-moz-linear-gradient(center bottom, #eee 0%, #fff 50%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);background-image:linear-gradient(to top, #eee 0%, #fff 50%);}.s2-container .s2-single-select .s2-selection{margin-right:26px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.s2-container .s2-open .select2-container-active .select2-choice,.s2-container .s2-open .select2-container-active .select2-choices{border:1px solid #5897fb;outline:none;-webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.3);box-shadow:0 0 5px rgba(0, 0, 0, 0.3);}.s2-search input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}.s2-dropdown{width:100%;margin-top:-1px;position:absolute;z-index:9999;overflow:scroll;background:#fff;color:#000;border:1px solid #5897fb;border-top:none;border-radius:0 0 4px 4px;-webkit-box-shadow:0 4px 5px rgba(0, 0, 0, 0.15);box-shadow:0 4px 5px rgba(0, 0, 0, 0.15);}.s2-hidden{display:none;}
.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle;}.select2-container .selection .single-select{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none;}.select2-container .selection .single-select .rendered-selection{display:block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-container .selection .multiple-select{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none;}.select2-container .selection .multiple-select .rendered-selection{display:block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-container .dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:100;}.select2-container .dropdown .results{display:block;}.select2-container .dropdown .results .options{list-style:none;margin:0;padding:0;}.select2-container .dropdown .results .options .option{cursor:pointer;padding:6px;user-select:none;-webkit-user-select:none;}.select2-container.open .dropdown{border-top:none;border-top-left-radius:0;border-top-right-radius:0;left:0;}.select2-container.select2-theme-default .selection .single-select{background-color:#eee;border:1px solid #aaa;border-radius:4px;}.select2-container.select2-theme-default .selection .single-select .rendered-selection{color:#444;line-height:28px;}.select2-container.select2-theme-default .selection .multiple-select{background-color:white;border:1px solid #aaa;border-radius:4px;}.select2-container.select2-theme-default .selection .multiple-select .rendered-selection{list-style:none;margin:0;padding:5px;padding-bottom:0;}.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;float:left;margin-right:5px;margin-bottom:5px;padding:0 5px;}.select2-container.select2-theme-default.open .selection .single-select,.select2-container.select2-theme-default.open .selection .multiple-select{border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container.select2-theme-default .dropdown .results{max-height:200px;overflow-y:scroll;}.select2-container.select2-theme-default .dropdown .results .options .option.group{padding:0;}.select2-container.select2-theme-default .dropdown .results .options .option.group .group-label{cursor:default;display:block;padding:6px;}.select2-container.select2-theme-default .dropdown .results .options .option.selected{background-color:#ddd;}.select2-container.select2-theme-default .dropdown .results .options .option.highlightable.highlighted{background-color:#5897fb;color:white;}.s2-container{margin:0;position:relative;zoom:1;vertical-align:middle;}.s2-container.s2-active{border:1px solid #5897fb;border-top:bottom;}.s2-container .s2-single-select{display:block;height:26px;padding:0 0 0 8px;overflow:hidden;position:relative;border:1px solid #aaa;white-space:nowrap;line-height:26px;color:#444;text-decoration:none;border-radius:4px;background-clip:padding-box;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#fff;background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));background-image:-webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);background-image:-moz-linear-gradient(center bottom, #eee 0%, #fff 50%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);background-image:linear-gradient(to top, #eee 0%, #fff 50%);}.s2-container .s2-single-select .s2-selection{margin-right:26px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.s2-container .s2-open .select2-container-active .select2-choice,.s2-container .s2-open .select2-container-active .select2-choices{border:1px solid #5897fb;outline:none;-webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.3);box-shadow:0 0 5px rgba(0, 0, 0, 0.3);}.s2-search input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}.s2-dropdown{width:100%;margin-top:-1px;position:absolute;z-index:9999;overflow:scroll;background:#fff;color:#000;border:1px solid #5897fb;border-top:none;border-radius:0 0 4px 4px;-webkit-box-shadow:0 4px 5px rgba(0, 0, 0, 0.15);box-shadow:0 4px 5px rgba(0, 0, 0, 0.15);}.s2-hidden{display:none;}

View File

@ -200,10 +200,39 @@ define('select2/results',[
Results.prototype.option = function (data) {
var $option = $(
'<li class="option"></li>'
'<li class="option highlightable selectable"></li>'
);
$option.html(data.text);
if (data.children && data.children.length > 0) {
$option.addClass('group').removeClass('highlightable selectable');
var $label = $('<strong class="group-label"></strong>');
$label.html(data.text);
var $children = [];
for (var c = 0; c < data.children.length; c++) {
var child = data.children[c];
var $child = this.option(child);
$children.push($child);
}
var $childrenContainer = $('<ul class="options nested-options"></ul>');
$childrenContainer.append($children);
$option.append($label);
$option.append($childrenContainer);
} else {
$option.html(data.text);
}
if (data.disabled) {
$option.removeClass('selectable').addClass('disabled');
}
$option.data('data', data);
return $option;
@ -225,7 +254,7 @@ define('select2/results',[
self.setClasses();
});
this.$results.on('mouseup', '.option', function (evt) {
this.$results.on('mouseup', '.option.selectable', function (evt) {
var $this = $(this);
var data = $this.data('data');
@ -248,7 +277,7 @@ define('select2/results',[
self.setClasses();
});
this.$results.on('mouseenter', '.option', function (evt) {
this.$results.on('mouseenter', '.option.highlightable', function (evt) {
self.$results.find('.option.highlighted').removeClass('highlighted');
$(this).addClass('highlighted');
});
@ -540,13 +569,21 @@ define('select2/data/select',[
var data = [];
var self = this;
this.$element.find('option').each(function () {
var $options = this.$element.children();
$options.each(function () {
var $option = $(this);
if (!$option.is('option') && !$option.is('optgroup')) {
return;
}
var option = self.item($option);
if (self.matches(params, option)) {
data.push(option);
var matches = self.matches(params, option);
if (matches !== null) {
data.push(matches);
}
});
@ -558,10 +595,32 @@ define('select2/data/select',[
// If the data has already be generated, use it
if (data == null) {
data = {
id: $option.val(),
text: $option.html()
};
if ($option.is('option')) {
data = {
id: $option.val(),
text: $option.html(),
disabled: $option.prop('disabled')
};
} else if ($option.is('optgroup')) {
data = {
id: -1,
text: $option.attr('label'),
children: []
};
var $children = $option.children('option');
var children = [];
for (var c = 0; c < $children.length; c++) {
var $child = $($children[c]);
var child = this.item($child);
children.push(child);
}
data.children = children;
}
$option.data('data', data);
}
@ -570,15 +629,34 @@ define('select2/data/select',[
};
SelectAdapter.prototype.matches = function (params, data) {
var match = $.extend(true, {}, data);
if (data.children) {
for (var c = data.children.length - 1; c >= 0; c--) {
var child = data.children[c];
var matches = this.matches(params, child);
// If there wasn't a match, remove the object in the array
if (matches === null) {
match.children.splice(c, 1);
}
}
if (match.children.length > 0) {
return match;
}
}
if ($.trim(params.term) === '') {
return true;
return match;
}
if (data.text.indexOf(params.term) > -1) {
return true;
return match;
}
return false;
return null;
};
return SelectAdapter;

106
dist/js/select2.amd.js vendored
View File

@ -200,10 +200,39 @@ define('select2/results',[
Results.prototype.option = function (data) {
var $option = $(
'<li class="option"></li>'
'<li class="option highlightable selectable"></li>'
);
$option.html(data.text);
if (data.children && data.children.length > 0) {
$option.addClass('group').removeClass('highlightable selectable');
var $label = $('<strong class="group-label"></strong>');
$label.html(data.text);
var $children = [];
for (var c = 0; c < data.children.length; c++) {
var child = data.children[c];
var $child = this.option(child);
$children.push($child);
}
var $childrenContainer = $('<ul class="options nested-options"></ul>');
$childrenContainer.append($children);
$option.append($label);
$option.append($childrenContainer);
} else {
$option.html(data.text);
}
if (data.disabled) {
$option.removeClass('selectable').addClass('disabled');
}
$option.data('data', data);
return $option;
@ -225,7 +254,7 @@ define('select2/results',[
self.setClasses();
});
this.$results.on('mouseup', '.option', function (evt) {
this.$results.on('mouseup', '.option.selectable', function (evt) {
var $this = $(this);
var data = $this.data('data');
@ -248,7 +277,7 @@ define('select2/results',[
self.setClasses();
});
this.$results.on('mouseenter', '.option', function (evt) {
this.$results.on('mouseenter', '.option.highlightable', function (evt) {
self.$results.find('.option.highlighted').removeClass('highlighted');
$(this).addClass('highlighted');
});
@ -540,13 +569,21 @@ define('select2/data/select',[
var data = [];
var self = this;
this.$element.find('option').each(function () {
var $options = this.$element.children();
$options.each(function () {
var $option = $(this);
if (!$option.is('option') && !$option.is('optgroup')) {
return;
}
var option = self.item($option);
if (self.matches(params, option)) {
data.push(option);
var matches = self.matches(params, option);
if (matches !== null) {
data.push(matches);
}
});
@ -558,10 +595,32 @@ define('select2/data/select',[
// If the data has already be generated, use it
if (data == null) {
data = {
id: $option.val(),
text: $option.html()
};
if ($option.is('option')) {
data = {
id: $option.val(),
text: $option.html(),
disabled: $option.prop('disabled')
};
} else if ($option.is('optgroup')) {
data = {
id: -1,
text: $option.attr('label'),
children: []
};
var $children = $option.children('option');
var children = [];
for (var c = 0; c < $children.length; c++) {
var $child = $($children[c]);
var child = this.item($child);
children.push(child);
}
data.children = children;
}
$option.data('data', data);
}
@ -570,15 +629,34 @@ define('select2/data/select',[
};
SelectAdapter.prototype.matches = function (params, data) {
var match = $.extend(true, {}, data);
if (data.children) {
for (var c = data.children.length - 1; c >= 0; c--) {
var child = data.children[c];
var matches = this.matches(params, child);
// If there wasn't a match, remove the object in the array
if (matches === null) {
match.children.splice(c, 1);
}
}
if (match.children.length > 0) {
return match;
}
}
if ($.trim(params.term) === '') {
return true;
return match;
}
if (data.text.indexOf(params.term) > -1) {
return true;
return match;
}
return false;
return null;
};
return SelectAdapter;

View File

@ -9738,10 +9738,39 @@ define('select2/results',[
Results.prototype.option = function (data) {
var $option = $(
'<li class="option"></li>'
'<li class="option highlightable selectable"></li>'
);
$option.html(data.text);
if (data.children && data.children.length > 0) {
$option.addClass('group').removeClass('highlightable selectable');
var $label = $('<strong class="group-label"></strong>');
$label.html(data.text);
var $children = [];
for (var c = 0; c < data.children.length; c++) {
var child = data.children[c];
var $child = this.option(child);
$children.push($child);
}
var $childrenContainer = $('<ul class="options nested-options"></ul>');
$childrenContainer.append($children);
$option.append($label);
$option.append($childrenContainer);
} else {
$option.html(data.text);
}
if (data.disabled) {
$option.removeClass('selectable').addClass('disabled');
}
$option.data('data', data);
return $option;
@ -9763,7 +9792,7 @@ define('select2/results',[
self.setClasses();
});
this.$results.on('mouseup', '.option', function (evt) {
this.$results.on('mouseup', '.option.selectable', function (evt) {
var $this = $(this);
var data = $this.data('data');
@ -9786,7 +9815,7 @@ define('select2/results',[
self.setClasses();
});
this.$results.on('mouseenter', '.option', function (evt) {
this.$results.on('mouseenter', '.option.highlightable', function (evt) {
self.$results.find('.option.highlighted').removeClass('highlighted');
$(this).addClass('highlighted');
});
@ -10078,13 +10107,21 @@ define('select2/data/select',[
var data = [];
var self = this;
this.$element.find('option').each(function () {
var $options = this.$element.children();
$options.each(function () {
var $option = $(this);
if (!$option.is('option') && !$option.is('optgroup')) {
return;
}
var option = self.item($option);
if (self.matches(params, option)) {
data.push(option);
var matches = self.matches(params, option);
if (matches !== null) {
data.push(matches);
}
});
@ -10096,10 +10133,32 @@ define('select2/data/select',[
// If the data has already be generated, use it
if (data == null) {
data = {
id: $option.val(),
text: $option.html()
};
if ($option.is('option')) {
data = {
id: $option.val(),
text: $option.html(),
disabled: $option.prop('disabled')
};
} else if ($option.is('optgroup')) {
data = {
id: -1,
text: $option.attr('label'),
children: []
};
var $children = $option.children('option');
var children = [];
for (var c = 0; c < $children.length; c++) {
var $child = $($children[c]);
var child = this.item($child);
children.push(child);
}
data.children = children;
}
$option.data('data', data);
}
@ -10108,15 +10167,34 @@ define('select2/data/select',[
};
SelectAdapter.prototype.matches = function (params, data) {
var match = $.extend(true, {}, data);
if (data.children) {
for (var c = data.children.length - 1; c >= 0; c--) {
var child = data.children[c];
var matches = this.matches(params, child);
// If there wasn't a match, remove the object in the array
if (matches === null) {
match.children.splice(c, 1);
}
}
if (match.children.length > 0) {
return match;
}
}
if ($.trim(params.term) === '') {
return true;
return match;
}
if (data.text.indexOf(params.term) > -1) {
return true;
return match;
}
return false;
return null;
};
return SelectAdapter;

File diff suppressed because one or more lines are too long

106
dist/js/select2.js vendored
View File

@ -629,10 +629,39 @@ define('select2/results',[
Results.prototype.option = function (data) {
var $option = $(
'<li class="option"></li>'
'<li class="option highlightable selectable"></li>'
);
$option.html(data.text);
if (data.children && data.children.length > 0) {
$option.addClass('group').removeClass('highlightable selectable');
var $label = $('<strong class="group-label"></strong>');
$label.html(data.text);
var $children = [];
for (var c = 0; c < data.children.length; c++) {
var child = data.children[c];
var $child = this.option(child);
$children.push($child);
}
var $childrenContainer = $('<ul class="options nested-options"></ul>');
$childrenContainer.append($children);
$option.append($label);
$option.append($childrenContainer);
} else {
$option.html(data.text);
}
if (data.disabled) {
$option.removeClass('selectable').addClass('disabled');
}
$option.data('data', data);
return $option;
@ -654,7 +683,7 @@ define('select2/results',[
self.setClasses();
});
this.$results.on('mouseup', '.option', function (evt) {
this.$results.on('mouseup', '.option.selectable', function (evt) {
var $this = $(this);
var data = $this.data('data');
@ -677,7 +706,7 @@ define('select2/results',[
self.setClasses();
});
this.$results.on('mouseenter', '.option', function (evt) {
this.$results.on('mouseenter', '.option.highlightable', function (evt) {
self.$results.find('.option.highlighted').removeClass('highlighted');
$(this).addClass('highlighted');
});
@ -969,13 +998,21 @@ define('select2/data/select',[
var data = [];
var self = this;
this.$element.find('option').each(function () {
var $options = this.$element.children();
$options.each(function () {
var $option = $(this);
if (!$option.is('option') && !$option.is('optgroup')) {
return;
}
var option = self.item($option);
if (self.matches(params, option)) {
data.push(option);
var matches = self.matches(params, option);
if (matches !== null) {
data.push(matches);
}
});
@ -987,10 +1024,32 @@ define('select2/data/select',[
// If the data has already be generated, use it
if (data == null) {
data = {
id: $option.val(),
text: $option.html()
};
if ($option.is('option')) {
data = {
id: $option.val(),
text: $option.html(),
disabled: $option.prop('disabled')
};
} else if ($option.is('optgroup')) {
data = {
id: -1,
text: $option.attr('label'),
children: []
};
var $children = $option.children('option');
var children = [];
for (var c = 0; c < $children.length; c++) {
var $child = $($children[c]);
var child = this.item($child);
children.push(child);
}
data.children = children;
}
$option.data('data', data);
}
@ -999,15 +1058,34 @@ define('select2/data/select',[
};
SelectAdapter.prototype.matches = function (params, data) {
var match = $.extend(true, {}, data);
if (data.children) {
for (var c = data.children.length - 1; c >= 0; c--) {
var child = data.children[c];
var matches = this.matches(params, child);
// If there wasn't a match, remove the object in the array
if (matches === null) {
match.children.splice(c, 1);
}
}
if (match.children.length > 0) {
return match;
}
}
if ($.trim(params.term) === '') {
return true;
return match;
}
if (data.text.indexOf(params.term) > -1) {
return true;
return match;
}
return false;
return null;
};
return SelectAdapter;

File diff suppressed because one or more lines are too long

View File

@ -6,7 +6,7 @@
{{ page.title }}
</title>
<script type="text/javascript" src="dist/js/select2.full.min.js"></script>
<script type="text/javascript" src="dist/js/select2.full.js"></script>
<script type="text/javascript" src="vendor/js/bootstrap.min.js"></script>
<script type="text/javascript" src="vendor/js/prettify.min.js"></script>

View File

@ -94,13 +94,21 @@ define([
var data = [];
var self = this;
this.$element.find('option').each(function () {
var $options = this.$element.children();
$options.each(function () {
var $option = $(this);
if (!$option.is('option') && !$option.is('optgroup')) {
return;
}
var option = self.item($option);
if (self.matches(params, option)) {
data.push(option);
var matches = self.matches(params, option);
if (matches !== null) {
data.push(matches);
}
});
@ -112,10 +120,32 @@ define([
// If the data has already be generated, use it
if (data == null) {
data = {
id: $option.val(),
text: $option.html()
};
if ($option.is('option')) {
data = {
id: $option.val(),
text: $option.html(),
disabled: $option.prop('disabled')
};
} else if ($option.is('optgroup')) {
data = {
id: -1,
text: $option.attr('label'),
children: []
};
var $children = $option.children('option');
var children = [];
for (var c = 0; c < $children.length; c++) {
var $child = $($children[c]);
var child = this.item($child);
children.push(child);
}
data.children = children;
}
$option.data('data', data);
}
@ -124,15 +154,34 @@ define([
};
SelectAdapter.prototype.matches = function (params, data) {
var match = $.extend(true, {}, data);
if (data.children) {
for (var c = data.children.length - 1; c >= 0; c--) {
var child = data.children[c];
var matches = this.matches(params, child);
// If there wasn't a match, remove the object in the array
if (matches === null) {
match.children.splice(c, 1);
}
}
if (match.children.length > 0) {
return match;
}
}
if ($.trim(params.term) === '') {
return true;
return match;
}
if (data.text.indexOf(params.term) > -1) {
return true;
return match;
}
return false;
return null;
};
return SelectAdapter;

View File

@ -61,10 +61,39 @@ define([
Results.prototype.option = function (data) {
var $option = $(
'<li class="option"></li>'
'<li class="option highlightable selectable"></li>'
);
$option.html(data.text);
if (data.children && data.children.length > 0) {
$option.addClass('group').removeClass('highlightable selectable');
var $label = $('<strong class="group-label"></strong>');
$label.html(data.text);
var $children = [];
for (var c = 0; c < data.children.length; c++) {
var child = data.children[c];
var $child = this.option(child);
$children.push($child);
}
var $childrenContainer = $('<ul class="options nested-options"></ul>');
$childrenContainer.append($children);
$option.append($label);
$option.append($childrenContainer);
} else {
$option.html(data.text);
}
if (data.disabled) {
$option.removeClass('selectable').addClass('disabled');
}
$option.data('data', data);
return $option;
@ -86,7 +115,7 @@ define([
self.setClasses();
});
this.$results.on('mouseup', '.option', function (evt) {
this.$results.on('mouseup', '.option.selectable', function (evt) {
var $this = $(this);
var data = $this.data('data');
@ -109,7 +138,7 @@ define([
self.setClasses();
});
this.$results.on('mouseenter', '.option', function (evt) {
this.$results.on('mouseenter', '.option.highlightable', function (evt) {
self.$results.find('.option.highlighted').removeClass('highlighted');
$(this).addClass('highlighted');
});

View File

@ -55,11 +55,21 @@
.options {
.option {
&.group {
padding: 0;
.group-label {
cursor: default;
display: block;
padding: 6px;
}
}
&.selected {
background-color: #ddd;
}
&.highlighted {
&.highlightable.highlighted {
background-color: #5897fb;
color: white;
}