Add classes to results options

dist/css/select2.css

@@ -43,6 +43,11 @@
     .select2-container .dropdown .results .options .option {
       cursor: pointer;
       padding: 6px; }
+      .select2-container .dropdown .results .options .option.selected {
+        background-color: #ddd; }
+      .select2-container .dropdown .results .options .option.hovered {
+        background-color: darkblue;
+        color: white; }
 .select2-container.open .dropdown {
   border-top-left-radius: 0;
   border-top-right-radius: 0;

dist/js/select2.amd.full.js

@@ -153,7 +153,7 @@ define('select2/data/select',[
 define('select2/results',[
   './utils'
 ], function (Utils) {
-  function Results ($element, dataAdapter) {
+  function Results ($element, options, dataAdapter) {
     this.$element = $element;
     this.data = dataAdapter;
 
@@ -190,6 +190,29 @@ define('select2/results',[
     this.$results.append($options);
   };
 
+  Results.prototype.setClasses = function () {
+    var self = this;
+
+    this.data.current(function (selected) {
+      selected = $.map(selected, function (s) { return s.id; });
+
+      self.$results.find(".option.selected").removeClass("selected");
+
+      var $options = self.$results.find(".option");
+
+      console.log($options);
+
+      $options.each(function () {
+        var $option = $(this);
+        var item = $option.data("data");
+
+        if (selected.indexOf(item.id) > -1) {
+          $option.addClass("selected");
+        }
+      });
+    });
+  };
+
   Results.prototype.option = function (data) {
     var $option = $(
       '<li class="option"></li>'
@@ -207,10 +230,13 @@ define('select2/results',[
     this.on("results:all", function (data) {
       self.clear();
       self.append(data);
+      self.setClasses();
     });
 
     this.on("results:append", function (data) {
       self.append(data);
+
+      self.setClasses();
     })
 
     this.$results.on("click", ".option", function (evt) {
@@ -219,7 +245,18 @@ define('select2/results',[
       self.trigger("selected", {
         originalEvent: evt,
         data: data
-      })
+      });
+
+      self.setClasses();
+    });
+
+    this.$results.on("mouseenter", ".option", function (evt) {
+      self.$results.find(".option.hovered").removeClass("hovered");
+      $(this).addClass("hovered");
+    });
+
+    this.$results.on("mouseleave", ".option", function (evt) {
+      $(this).removeClass("hovered");
     });
   };
 
@@ -337,7 +374,7 @@ define('select2/core',[
 
     // Set up containers and adapters
 
-    this.data = new this.options.dataAdapter($element, options);
+    this.data = new this.options.dataAdapter($element, this.options);
 
     var $container = this.render();
 
@@ -345,21 +382,21 @@ define('select2/core',[
 
     $container.width($element.width());
 
-    this.selection = new this.options.selectionAdapter($element, options);
+    this.selection = new this.options.selectionAdapter($element, this.options);
 
     var $selectionContainer = $container.find(".selection");
     var $selection = this.selection.render();
 
     $selectionContainer.append($selection);
 
-    this.dropdown = new this.options.dropdownAdapter($element, options);
+    this.dropdown = new this.options.dropdownAdapter($element, this.options);
 
     var $dropdownContainer = $container.find(".dropdown");
     var $dropdown = this.dropdown.render();
 
     $dropdownContainer.append($dropdown);
 
-    this.results = new this.options.resultsAdapter($element, options);
+    this.results = new this.options.resultsAdapter($element, this.options, this.data);
 
     var $resultsContainer = $dropdown.find(".results");
     var $results = this.results.render();

dist/js/select2.amd.js

@@ -153,7 +153,7 @@ define('select2/data/select',[
 define('select2/results',[
   './utils'
 ], function (Utils) {
-  function Results ($element, dataAdapter) {
+  function Results ($element, options, dataAdapter) {
     this.$element = $element;
     this.data = dataAdapter;
 
@@ -190,6 +190,29 @@ define('select2/results',[
     this.$results.append($options);
   };
 
+  Results.prototype.setClasses = function () {
+    var self = this;
+
+    this.data.current(function (selected) {
+      selected = $.map(selected, function (s) { return s.id; });
+
+      self.$results.find(".option.selected").removeClass("selected");
+
+      var $options = self.$results.find(".option");
+
+      console.log($options);
+
+      $options.each(function () {
+        var $option = $(this);
+        var item = $option.data("data");
+
+        if (selected.indexOf(item.id) > -1) {
+          $option.addClass("selected");
+        }
+      });
+    });
+  };
+
   Results.prototype.option = function (data) {
     var $option = $(
       '<li class="option"></li>'
@@ -207,10 +230,13 @@ define('select2/results',[
     this.on("results:all", function (data) {
       self.clear();
       self.append(data);
+      self.setClasses();
     });
 
     this.on("results:append", function (data) {
       self.append(data);
+
+      self.setClasses();
     })
 
     this.$results.on("click", ".option", function (evt) {
@@ -219,7 +245,18 @@ define('select2/results',[
       self.trigger("selected", {
         originalEvent: evt,
         data: data
-      })
+      });
+
+      self.setClasses();
+    });
+
+    this.$results.on("mouseenter", ".option", function (evt) {
+      self.$results.find(".option.hovered").removeClass("hovered");
+      $(this).addClass("hovered");
+    });
+
+    this.$results.on("mouseleave", ".option", function (evt) {
+      $(this).removeClass("hovered");
     });
   };
 
@@ -337,7 +374,7 @@ define('select2/core',[
 
     // Set up containers and adapters
 
-    this.data = new this.options.dataAdapter($element, options);
+    this.data = new this.options.dataAdapter($element, this.options);
 
     var $container = this.render();
 
@@ -345,21 +382,21 @@ define('select2/core',[
 
     $container.width($element.width());
 
-    this.selection = new this.options.selectionAdapter($element, options);
+    this.selection = new this.options.selectionAdapter($element, this.options);
 
     var $selectionContainer = $container.find(".selection");
     var $selection = this.selection.render();
 
     $selectionContainer.append($selection);
 
-    this.dropdown = new this.options.dropdownAdapter($element, options);
+    this.dropdown = new this.options.dropdownAdapter($element, this.options);
 
     var $dropdownContainer = $container.find(".dropdown");
     var $dropdown = this.dropdown.render();
 
     $dropdownContainer.append($dropdown);
 
-    this.results = new this.options.resultsAdapter($element, options);
+    this.results = new this.options.resultsAdapter($element, this.options, this.data);
 
     var $resultsContainer = $dropdown.find(".results");
     var $results = this.results.render();

dist/js/select2.full.js

@@ -9690,7 +9690,7 @@ define('select2/data/select',[
 define('select2/results',[
   './utils'
 ], function (Utils) {
-  function Results ($element, dataAdapter) {
+  function Results ($element, options, dataAdapter) {
     this.$element = $element;
     this.data = dataAdapter;
 
@@ -9727,6 +9727,29 @@ define('select2/results',[
     this.$results.append($options);
   };
 
+  Results.prototype.setClasses = function () {
+    var self = this;
+
+    this.data.current(function (selected) {
+      selected = $.map(selected, function (s) { return s.id; });
+
+      self.$results.find(".option.selected").removeClass("selected");
+
+      var $options = self.$results.find(".option");
+
+      console.log($options);
+
+      $options.each(function () {
+        var $option = $(this);
+        var item = $option.data("data");
+
+        if (selected.indexOf(item.id) > -1) {
+          $option.addClass("selected");
+        }
+      });
+    });
+  };
+
   Results.prototype.option = function (data) {
     var $option = $(
       '<li class="option"></li>'
@@ -9744,10 +9767,13 @@ define('select2/results',[
     this.on("results:all", function (data) {
       self.clear();
       self.append(data);
+      self.setClasses();
     });
 
     this.on("results:append", function (data) {
       self.append(data);
+
+      self.setClasses();
     })
 
     this.$results.on("click", ".option", function (evt) {
@@ -9756,7 +9782,18 @@ define('select2/results',[
       self.trigger("selected", {
         originalEvent: evt,
         data: data
-      })
+      });
+
+      self.setClasses();
+    });
+
+    this.$results.on("mouseenter", ".option", function (evt) {
+      self.$results.find(".option.hovered").removeClass("hovered");
+      $(this).addClass("hovered");
+    });
+
+    this.$results.on("mouseleave", ".option", function (evt) {
+      $(this).removeClass("hovered");
     });
   };
 
@@ -9874,7 +9911,7 @@ define('select2/core',[
 
     // Set up containers and adapters
 
-    this.data = new this.options.dataAdapter($element, options);
+    this.data = new this.options.dataAdapter($element, this.options);
 
     var $container = this.render();
 
@@ -9882,21 +9919,21 @@ define('select2/core',[
 
     $container.width($element.width());
 
-    this.selection = new this.options.selectionAdapter($element, options);
+    this.selection = new this.options.selectionAdapter($element, this.options);
 
     var $selectionContainer = $container.find(".selection");
     var $selection = this.selection.render();
 
     $selectionContainer.append($selection);
 
-    this.dropdown = new this.options.dropdownAdapter($element, options);
+    this.dropdown = new this.options.dropdownAdapter($element, this.options);
 
     var $dropdownContainer = $container.find(".dropdown");
     var $dropdown = this.dropdown.render();
 
     $dropdownContainer.append($dropdown);
 
-    this.results = new this.options.resultsAdapter($element, options);
+    this.results = new this.options.resultsAdapter($element, this.options, this.data);
 
     var $resultsContainer = $dropdown.find(".results");
     var $results = this.results.render();

dist/js/select2.js

@@ -581,7 +581,7 @@ define('select2/data/select',[
 define('select2/results',[
   './utils'
 ], function (Utils) {
-  function Results ($element, dataAdapter) {
+  function Results ($element, options, dataAdapter) {
     this.$element = $element;
     this.data = dataAdapter;
 
@@ -618,6 +618,29 @@ define('select2/results',[
     this.$results.append($options);
   };
 
+  Results.prototype.setClasses = function () {
+    var self = this;
+
+    this.data.current(function (selected) {
+      selected = $.map(selected, function (s) { return s.id; });
+
+      self.$results.find(".option.selected").removeClass("selected");
+
+      var $options = self.$results.find(".option");
+
+      console.log($options);
+
+      $options.each(function () {
+        var $option = $(this);
+        var item = $option.data("data");
+
+        if (selected.indexOf(item.id) > -1) {
+          $option.addClass("selected");
+        }
+      });
+    });
+  };
+
   Results.prototype.option = function (data) {
     var $option = $(
       '<li class="option"></li>'
@@ -635,10 +658,13 @@ define('select2/results',[
     this.on("results:all", function (data) {
       self.clear();
       self.append(data);
+      self.setClasses();
     });
 
     this.on("results:append", function (data) {
       self.append(data);
+
+      self.setClasses();
     })
 
     this.$results.on("click", ".option", function (evt) {
@@ -647,7 +673,18 @@ define('select2/results',[
       self.trigger("selected", {
         originalEvent: evt,
         data: data
-      })
+      });
+
+      self.setClasses();
+    });
+
+    this.$results.on("mouseenter", ".option", function (evt) {
+      self.$results.find(".option.hovered").removeClass("hovered");
+      $(this).addClass("hovered");
+    });
+
+    this.$results.on("mouseleave", ".option", function (evt) {
+      $(this).removeClass("hovered");
     });
   };
 
@@ -765,7 +802,7 @@ define('select2/core',[
 
     // Set up containers and adapters
 
-    this.data = new this.options.dataAdapter($element, options);
+    this.data = new this.options.dataAdapter($element, this.options);
 
     var $container = this.render();
 
@@ -773,21 +810,21 @@ define('select2/core',[
 
     $container.width($element.width());
 
-    this.selection = new this.options.selectionAdapter($element, options);
+    this.selection = new this.options.selectionAdapter($element, this.options);
 
     var $selectionContainer = $container.find(".selection");
     var $selection = this.selection.render();
 
     $selectionContainer.append($selection);
 
-    this.dropdown = new this.options.dropdownAdapter($element, options);
+    this.dropdown = new this.options.dropdownAdapter($element, this.options);
 
     var $dropdownContainer = $container.find(".dropdown");
     var $dropdown = this.dropdown.render();
 
     $dropdownContainer.append($dropdown);
 
-    this.results = new this.options.resultsAdapter($element, options);
+    this.results = new this.options.resultsAdapter($element, this.options, this.data);
 
     var $resultsContainer = $dropdown.find(".results");
     var $results = this.results.render();

src/js/select2/core.js

@@ -11,7 +11,7 @@ define([
 
     // Set up containers and adapters
 
-    this.data = new this.options.dataAdapter($element, options);
+    this.data = new this.options.dataAdapter($element, this.options);
 
     var $container = this.render();
 
@@ -19,21 +19,21 @@ define([
 
     $container.width($element.width());
 
-    this.selection = new this.options.selectionAdapter($element, options);
+    this.selection = new this.options.selectionAdapter($element, this.options);
 
     var $selectionContainer = $container.find(".selection");
     var $selection = this.selection.render();
 
     $selectionContainer.append($selection);
 
-    this.dropdown = new this.options.dropdownAdapter($element, options);
+    this.dropdown = new this.options.dropdownAdapter($element, this.options);
 
     var $dropdownContainer = $container.find(".dropdown");
     var $dropdown = this.dropdown.render();
 
     $dropdownContainer.append($dropdown);
 
-    this.results = new this.options.resultsAdapter($element, options);
+    this.results = new this.options.resultsAdapter($element, this.options, this.data);
 
     var $resultsContainer = $dropdown.find(".results");
     var $results = this.results.render();

src/js/select2/results.js

@@ -1,7 +1,7 @@
 define([
   './utils'
 ], function (Utils) {
-  function Results ($element, dataAdapter) {
+  function Results ($element, options, dataAdapter) {
     this.$element = $element;
     this.data = dataAdapter;
 
@@ -38,6 +38,29 @@ define([
     this.$results.append($options);
   };
 
+  Results.prototype.setClasses = function () {
+    var self = this;
+
+    this.data.current(function (selected) {
+      selected = $.map(selected, function (s) { return s.id; });
+
+      self.$results.find(".option.selected").removeClass("selected");
+
+      var $options = self.$results.find(".option");
+
+      console.log($options);
+
+      $options.each(function () {
+        var $option = $(this);
+        var item = $option.data("data");
+
+        if (selected.indexOf(item.id) > -1) {
+          $option.addClass("selected");
+        }
+      });
+    });
+  };
+
   Results.prototype.option = function (data) {
     var $option = $(
       '<li class="option"></li>'
@@ -55,10 +78,13 @@ define([
     this.on("results:all", function (data) {
       self.clear();
       self.append(data);
+      self.setClasses();
     });
 
     this.on("results:append", function (data) {
       self.append(data);
+
+      self.setClasses();
     })
 
     this.$results.on("click", ".option", function (evt) {
@@ -67,7 +93,18 @@ define([
       self.trigger("selected", {
         originalEvent: evt,
         data: data
-      })
+      });
+
+      self.setClasses();
+    });
+
+    this.$results.on("mouseenter", ".option", function (evt) {
+      self.$results.find(".option.hovered").removeClass("hovered");
+      $(this).addClass("hovered");
+    });
+
+    this.$results.on("mouseleave", ".option", function (evt) {
+      $(this).removeClass("hovered");
     });
   };
 

src/scss/_dropdown.scss

@@ -27,6 +27,15 @@
         .option {
           cursor: pointer;
           padding: 6px;
+
+          &.selected {
+            background-color: #ddd;
+          }
+
+          &.hovered {
+            background-color: darkblue;
+            color: white;
+          }
         }
       }
     }