Skip to content

Commit 2ca1451

Browse files
kevin-brownkevin-brown
committed
Add classes to results options
1 parent 01c3dc5 commit 2ca1451

8 files changed

Lines changed: 229 additions & 30 deletions

File tree

‎dist/css/select2.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,11 @@
4343
.select2-container .dropdown .results .options .option {
4444
cursor: pointer;
4545
padding: 6px; }
46+
.select2-container .dropdown .results .options .option.selected {
47+
background-color: #ddd; }
48+
.select2-container .dropdown .results .options .option.hovered {
49+
background-color: darkblue;
50+
color: white; }
4651
.select2-container.open .dropdown {
4752
border-top-left-radius: 0;
4853
border-top-right-radius: 0;

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

Lines changed: 43 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ define('select2/data/select',[
153153
define('select2/results',[
154154
'./utils'
155155
], function (Utils) {
156-
function Results ($element, dataAdapter) {
156+
function Results ($element, options, dataAdapter) {
157157
this.$element = $element;
158158
this.data = dataAdapter;
159159

@@ -190,6 +190,29 @@ define('select2/results',[
190190
this.$results.append($options);
191191
};
192192

193+
Results.prototype.setClasses = function () {
194+
var self = this;
195+
196+
this.data.current(function (selected) {
197+
selected = $.map(selected, function (s) { return s.id; });
198+
199+
self.$results.find(".option.selected").removeClass("selected");
200+
201+
var $options = self.$results.find(".option");
202+
203+
console.log($options);
204+
205+
$options.each(function () {
206+
var $option = $(this);
207+
var item = $option.data("data");
208+
209+
if (selected.indexOf(item.id) > -1) {
210+
$option.addClass("selected");
211+
}
212+
});
213+
});
214+
};
215+
193216
Results.prototype.option = function (data) {
194217
var $option = $(
195218
'<li class="option"></li>'
@@ -207,10 +230,13 @@ define('select2/results',[
207230
this.on("results:all", function (data) {
208231
self.clear();
209232
self.append(data);
233+
self.setClasses();
210234
});
211235

212236
this.on("results:append", function (data) {
213237
self.append(data);
238+
239+
self.setClasses();
214240
})
215241

216242
this.$results.on("click", ".option", function (evt) {
@@ -219,7 +245,18 @@ define('select2/results',[
219245
self.trigger("selected", {
220246
originalEvent: evt,
221247
data: data
222-
})
248+
});
249+
250+
self.setClasses();
251+
});
252+
253+
this.$results.on("mouseenter", ".option", function (evt) {
254+
self.$results.find(".option.hovered").removeClass("hovered");
255+
$(this).addClass("hovered");
256+
});
257+
258+
this.$results.on("mouseleave", ".option", function (evt) {
259+
$(this).removeClass("hovered");
223260
});
224261
};
225262

@@ -337,29 +374,29 @@ define('select2/core',[
337374

338375
// Set up containers and adapters
339376

340-
this.data = new this.options.dataAdapter($element, options);
377+
this.data = new this.options.dataAdapter($element, this.options);
341378

342379
var $container = this.render();
343380

344381
$container.insertAfter(this.$element);
345382

346383
$container.width($element.width());
347384

348-
this.selection = new this.options.selectionAdapter($element, options);
385+
this.selection = new this.options.selectionAdapter($element, this.options);
349386

350387
var $selectionContainer = $container.find(".selection");
351388
var $selection = this.selection.render();
352389

353390
$selectionContainer.append($selection);
354391

355-
this.dropdown = new this.options.dropdownAdapter($element, options);
392+
this.dropdown = new this.options.dropdownAdapter($element, this.options);
356393

357394
var $dropdownContainer = $container.find(".dropdown");
358395
var $dropdown = this.dropdown.render();
359396

360397
$dropdownContainer.append($dropdown);
361398

362-
this.results = new this.options.resultsAdapter($element, options);
399+
this.results = new this.options.resultsAdapter($element, this.options, this.data);
363400

364401
var $resultsContainer = $dropdown.find(".results");
365402
var $results = this.results.render();

‎dist/js/select2.amd.js‎

Lines changed: 43 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ define('select2/data/select',[
153153
define('select2/results',[
154154
'./utils'
155155
], function (Utils) {
156-
function Results ($element, dataAdapter) {
156+
function Results ($element, options, dataAdapter) {
157157
this.$element = $element;
158158
this.data = dataAdapter;
159159

@@ -190,6 +190,29 @@ define('select2/results',[
190190
this.$results.append($options);
191191
};
192192

193+
Results.prototype.setClasses = function () {
194+
var self = this;
195+
196+
this.data.current(function (selected) {
197+
selected = $.map(selected, function (s) { return s.id; });
198+
199+
self.$results.find(".option.selected").removeClass("selected");
200+
201+
var $options = self.$results.find(".option");
202+
203+
console.log($options);
204+
205+
$options.each(function () {
206+
var $option = $(this);
207+
var item = $option.data("data");
208+
209+
if (selected.indexOf(item.id) > -1) {
210+
$option.addClass("selected");
211+
}
212+
});
213+
});
214+
};
215+
193216
Results.prototype.option = function (data) {
194217
var $option = $(
195218
'<li class="option"></li>'
@@ -207,10 +230,13 @@ define('select2/results',[
207230
this.on("results:all", function (data) {
208231
self.clear();
209232
self.append(data);
233+
self.setClasses();
210234
});
211235

212236
this.on("results:append", function (data) {
213237
self.append(data);
238+
239+
self.setClasses();
214240
})
215241

216242
this.$results.on("click", ".option", function (evt) {
@@ -219,7 +245,18 @@ define('select2/results',[
219245
self.trigger("selected", {
220246
originalEvent: evt,
221247
data: data
222-
})
248+
});
249+
250+
self.setClasses();
251+
});
252+
253+
this.$results.on("mouseenter", ".option", function (evt) {
254+
self.$results.find(".option.hovered").removeClass("hovered");
255+
$(this).addClass("hovered");
256+
});
257+
258+
this.$results.on("mouseleave", ".option", function (evt) {
259+
$(this).removeClass("hovered");
223260
});
224261
};
225262

@@ -337,29 +374,29 @@ define('select2/core',[
337374

338375
// Set up containers and adapters
339376

340-
this.data = new this.options.dataAdapter($element, options);
377+
this.data = new this.options.dataAdapter($element, this.options);
341378

342379
var $container = this.render();
343380

344381
$container.insertAfter(this.$element);
345382

346383
$container.width($element.width());
347384

348-
this.selection = new this.options.selectionAdapter($element, options);
385+
this.selection = new this.options.selectionAdapter($element, this.options);
349386

350387
var $selectionContainer = $container.find(".selection");
351388
var $selection = this.selection.render();
352389

353390
$selectionContainer.append($selection);
354391

355-
this.dropdown = new this.options.dropdownAdapter($element, options);
392+
this.dropdown = new this.options.dropdownAdapter($element, this.options);
356393

357394
var $dropdownContainer = $container.find(".dropdown");
358395
var $dropdown = this.dropdown.render();
359396

360397
$dropdownContainer.append($dropdown);
361398

362-
this.results = new this.options.resultsAdapter($element, options);
399+
this.results = new this.options.resultsAdapter($element, this.options, this.data);
363400

364401
var $resultsContainer = $dropdown.find(".results");
365402
var $results = this.results.render();

‎dist/js/select2.full.js‎

Lines changed: 43 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9690,7 +9690,7 @@ define('select2/data/select',[
96909690
define('select2/results',[
96919691
'./utils'
96929692
], function (Utils) {
9693-
function Results ($element, dataAdapter) {
9693+
function Results ($element, options, dataAdapter) {
96949694
this.$element = $element;
96959695
this.data = dataAdapter;
96969696

@@ -9727,6 +9727,29 @@ define('select2/results',[
97279727
this.$results.append($options);
97289728
};
97299729

9730+
Results.prototype.setClasses = function () {
9731+
var self = this;
9732+
9733+
this.data.current(function (selected) {
9734+
selected = $.map(selected, function (s) { return s.id; });
9735+
9736+
self.$results.find(".option.selected").removeClass("selected");
9737+
9738+
var $options = self.$results.find(".option");
9739+
9740+
console.log($options);
9741+
9742+
$options.each(function () {
9743+
var $option = $(this);
9744+
var item = $option.data("data");
9745+
9746+
if (selected.indexOf(item.id) > -1) {
9747+
$option.addClass("selected");
9748+
}
9749+
});
9750+
});
9751+
};
9752+
97309753
Results.prototype.option = function (data) {
97319754
var $option = $(
97329755
'<li class="option"></li>'
@@ -9744,10 +9767,13 @@ define('select2/results',[
97449767
this.on("results:all", function (data) {
97459768
self.clear();
97469769
self.append(data);
9770+
self.setClasses();
97479771
});
97489772

97499773
this.on("results:append", function (data) {
97509774
self.append(data);
9775+
9776+
self.setClasses();
97519777
})
97529778

97539779
this.$results.on("click", ".option", function (evt) {
@@ -9756,7 +9782,18 @@ define('select2/results',[
97569782
self.trigger("selected", {
97579783
originalEvent: evt,
97589784
data: data
9759-
})
9785+
});
9786+
9787+
self.setClasses();
9788+
});
9789+
9790+
this.$results.on("mouseenter", ".option", function (evt) {
9791+
self.$results.find(".option.hovered").removeClass("hovered");
9792+
$(this).addClass("hovered");
9793+
});
9794+
9795+
this.$results.on("mouseleave", ".option", function (evt) {
9796+
$(this).removeClass("hovered");
97609797
});
97619798
};
97629799

@@ -9874,29 +9911,29 @@ define('select2/core',[
98749911

98759912
// Set up containers and adapters
98769913

9877-
this.data = new this.options.dataAdapter($element, options);
9914+
this.data = new this.options.dataAdapter($element, this.options);
98789915

98799916
var $container = this.render();
98809917

98819918
$container.insertAfter(this.$element);
98829919

98839920
$container.width($element.width());
98849921

9885-
this.selection = new this.options.selectionAdapter($element, options);
9922+
this.selection = new this.options.selectionAdapter($element, this.options);
98869923

98879924
var $selectionContainer = $container.find(".selection");
98889925
var $selection = this.selection.render();
98899926

98909927
$selectionContainer.append($selection);
98919928

9892-
this.dropdown = new this.options.dropdownAdapter($element, options);
9929+
this.dropdown = new this.options.dropdownAdapter($element, this.options);
98939930

98949931
var $dropdownContainer = $container.find(".dropdown");
98959932
var $dropdown = this.dropdown.render();
98969933

98979934
$dropdownContainer.append($dropdown);
98989935

9899-
this.results = new this.options.resultsAdapter($element, options);
9936+
this.results = new this.options.resultsAdapter($element, this.options, this.data);
99009937

99019938
var $resultsContainer = $dropdown.find(".results");
99029939
var $results = this.results.render();

0 commit comments

Comments
 (0)