Backspace unselects item in multiple selects

The backspace key now behaves very similar to how it does in other
multiple select boxes, such as the one that Stack Exchange uses.
When the user presses the backspace key, the last selected option
is unselected and the search box is filled with the text of the
option.

dist/js/select2.amd.full.js

@@ -1038,8 +1038,9 @@ define('select2/selection/allowClear',[
 });
 
 define('select2/selection/search',[
-  '../utils'
-], function (Utils) {
+  '../utils',
+  '../keys'
+], function (Utils, KEYS) {
   function Search (decorated, $element, options) {
     decorated.call(this, $element, options);
   }
@@ -1083,6 +1084,19 @@ define('select2/selection/search',[
       self.trigger('keypress', evt);
 
       self._keyUpPrevented = evt.isDefaultPrevented();
+
+      var key = evt.which;
+
+      if (key === KEYS.BACKSPACE && self.$search.val() === '') {
+        var $previousChoice = self.$searchContainer
+          .prev('.select2-selection__choice');
+
+        if ($previousChoice.length > 0) {
+          var item = $previousChoice.data('data');
+
+          self.searchRemoveChoice(item);
+        }
+      }
     });
 
     this.$selection.on('keyup', '.select2-search--inline', function (evt) {
@@ -1119,6 +1133,16 @@ define('select2/selection/search',[
     this._keyUpPrevented = false;
   };
 
+  Search.prototype.searchRemoveChoice = function (item) {
+    this.trigger('unselected', {
+      data: item
+    });
+
+    this.trigger('open');
+
+    this.$search.val(item.text + ' ');
+  };
+
   Search.prototype.resizeSearch = function () {
     this.$search.css('width', '25px');
 

dist/js/select2.amd.js

@@ -1038,8 +1038,9 @@ define('select2/selection/allowClear',[
 });
 
 define('select2/selection/search',[
-  '../utils'
-], function (Utils) {
+  '../utils',
+  '../keys'
+], function (Utils, KEYS) {
   function Search (decorated, $element, options) {
     decorated.call(this, $element, options);
   }
@@ -1083,6 +1084,19 @@ define('select2/selection/search',[
       self.trigger('keypress', evt);
 
       self._keyUpPrevented = evt.isDefaultPrevented();
+
+      var key = evt.which;
+
+      if (key === KEYS.BACKSPACE && self.$search.val() === '') {
+        var $previousChoice = self.$searchContainer
+          .prev('.select2-selection__choice');
+
+        if ($previousChoice.length > 0) {
+          var item = $previousChoice.data('data');
+
+          self.searchRemoveChoice(item);
+        }
+      }
     });
 
     this.$selection.on('keyup', '.select2-search--inline', function (evt) {
@@ -1119,6 +1133,16 @@ define('select2/selection/search',[
     this._keyUpPrevented = false;
   };
 
+  Search.prototype.searchRemoveChoice = function (item) {
+    this.trigger('unselected', {
+      data: item
+    });
+
+    this.trigger('open');
+
+    this.$search.val(item.text + ' ');
+  };
+
   Search.prototype.resizeSearch = function () {
     this.$search.css('width', '25px');
 

dist/js/select2.full.js

@@ -10573,8 +10573,9 @@ define('select2/selection/allowClear',[
 });
 
 define('select2/selection/search',[
-  '../utils'
-], function (Utils) {
+  '../utils',
+  '../keys'
+], function (Utils, KEYS) {
   function Search (decorated, $element, options) {
     decorated.call(this, $element, options);
   }
@@ -10618,6 +10619,19 @@ define('select2/selection/search',[
       self.trigger('keypress', evt);
 
       self._keyUpPrevented = evt.isDefaultPrevented();
+
+      var key = evt.which;
+
+      if (key === KEYS.BACKSPACE && self.$search.val() === '') {
+        var $previousChoice = self.$searchContainer
+          .prev('.select2-selection__choice');
+
+        if ($previousChoice.length > 0) {
+          var item = $previousChoice.data('data');
+
+          self.searchRemoveChoice(item);
+        }
+      }
     });
 
     this.$selection.on('keyup', '.select2-search--inline', function (evt) {
@@ -10654,6 +10668,16 @@ define('select2/selection/search',[
     this._keyUpPrevented = false;
   };
 
+  Search.prototype.searchRemoveChoice = function (item) {
+    this.trigger('unselected', {
+      data: item
+    });
+
+    this.trigger('open');
+
+    this.$search.val(item.text + ' ');
+  };
+
   Search.prototype.resizeSearch = function () {
     this.$search.css('width', '25px');
 

dist/js/select2.js

@@ -1466,8 +1466,9 @@ define('select2/selection/allowClear',[
 });
 
 define('select2/selection/search',[
-  '../utils'
-], function (Utils) {
+  '../utils',
+  '../keys'
+], function (Utils, KEYS) {
   function Search (decorated, $element, options) {
     decorated.call(this, $element, options);
   }
@@ -1511,6 +1512,19 @@ define('select2/selection/search',[
       self.trigger('keypress', evt);
 
       self._keyUpPrevented = evt.isDefaultPrevented();
+
+      var key = evt.which;
+
+      if (key === KEYS.BACKSPACE && self.$search.val() === '') {
+        var $previousChoice = self.$searchContainer
+          .prev('.select2-selection__choice');
+
+        if ($previousChoice.length > 0) {
+          var item = $previousChoice.data('data');
+
+          self.searchRemoveChoice(item);
+        }
+      }
     });
 
     this.$selection.on('keyup', '.select2-search--inline', function (evt) {
@@ -1547,6 +1561,16 @@ define('select2/selection/search',[
     this._keyUpPrevented = false;
   };
 
+  Search.prototype.searchRemoveChoice = function (item) {
+    this.trigger('unselected', {
+      data: item
+    });
+
+    this.trigger('open');
+
+    this.$search.val(item.text + ' ');
+  };
+
   Search.prototype.resizeSearch = function () {
     this.$search.css('width', '25px');
 

src/js/select2/selection/search.js

@@ -1,6 +1,7 @@
 define([
-  '../utils'
-], function (Utils) {
+  '../utils',
+  '../keys'
+], function (Utils, KEYS) {
   function Search (decorated, $element, options) {
     decorated.call(this, $element, options);
   }
@@ -44,6 +45,19 @@ define([
       self.trigger('keypress', evt);
 
       self._keyUpPrevented = evt.isDefaultPrevented();
+
+      var key = evt.which;
+
+      if (key === KEYS.BACKSPACE && self.$search.val() === '') {
+        var $previousChoice = self.$searchContainer
+          .prev('.select2-selection__choice');
+
+        if ($previousChoice.length > 0) {
+          var item = $previousChoice.data('data');
+
+          self.searchRemoveChoice(item);
+        }
+      }
     });
 
     this.$selection.on('keyup', '.select2-search--inline', function (evt) {
@@ -80,6 +94,16 @@ define([
     this._keyUpPrevented = false;
   };
 
+  Search.prototype.searchRemoveChoice = function (item) {
+    this.trigger('unselected', {
+      data: item
+    });
+
+    this.trigger('open');
+
+    this.$search.val(item.text + ' ');
+  };
+
   Search.prototype.resizeSearch = function () {
     this.$search.css('width', '25px');