Automatically resize the search box

Now the search box is automatically resized for placeholders to
fit the available space, so we don't need to worry about the
placeholder not being visible. When the placeholder doesn't need
to be visible, the size of the search box is determined based on
the length of the current search term.

dist/css/select2.css

@@ -83,7 +83,8 @@
 .select2-container.select2-theme-default .selection .multiple-select {
   background-color: white;
   border: 1px solid #aaa;
-  border-radius: 4px; }
+  border-radius: 4px;
+  cursor: text; }
   .select2-container.select2-theme-default .selection .multiple-select .rendered-selection {
     list-style: none;
     margin: 0;
@@ -96,12 +97,14 @@
       background-color: #e4e4e4;
       border: 1px solid #aaa;
       border-radius: 4px;
+      cursor: default;
       float: left;
       margin-right: 5px;
       margin-top: 5px;
       padding: 0 5px; }
       .select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice .remove {
         color: #999;
+        cursor: pointer;
         display: inline-block;
         font-weight: bold;
         margin-right: 2px; }
@@ -112,6 +115,9 @@
   border-bottom-right-radius: 0; }
 .select2-container.select2-theme-default .select2-search input {
   border: 1px solid #aaa; }
+.select2-container.select2-theme-default .select2-search-inline input {
+  border: none;
+  outline: 0; }
 .select2-container.select2-theme-default .dropdown .results > .options {
   max-height: 200px;
   overflow-y: auto; }

dist/js/select2.amd.full.js

@@ -973,16 +973,6 @@ define('select2/selection/search',[
 
     decorated.call(this, container, $container);
 
-    this.$search.on('keydown', function (evt) {
-      self.trigger('keypress', evt);
-
-      self._keyUpPrevented = evt.isDefaultPrevented();
-    });
-
-    this.$search.on('keyup', function (evt) {
-      self.handleSearch(evt);
-    });
-
     container.on('open', function () {
       self.$search.attr('tabindex', 0);
 
@@ -995,13 +985,17 @@ define('select2/selection/search',[
       self.$search.val('');
     });
 
-    this.$search.off('keydown').on('keydown', function (evt) {
+    this.$selection.on('keydown', '.select2-search-inline', function (evt) {
       evt.stopPropagation();
 
       self.trigger('keypress', evt);
 
       self._keyUpPrevented = evt.isDefaultPrevented();
     });
+
+    this.$selection.on('keyup', '.select2-search-inline', function (evt) {
+      self.handleSearch(evt);
+    });
   };
 
   Search.prototype.createPlaceholder = function (decorated, placeholder) {
@@ -1014,9 +1008,13 @@ define('select2/selection/search',[
     decorated.call(this, data);
 
     this.$selection.find('.rendered-selection').append(this.$searchContainer);
+
+    this.resizeSearch();
   };
 
   Search.prototype.handleSearch = function (evt) {
+    this.resizeSearch();
+
     if (!this._keyUpPrevented) {
       var input = this.$search.val();
 
@@ -1028,6 +1026,25 @@ define('select2/selection/search',[
     this._keyUpPrevented = false;
   };
 
+  Search.prototype.resizeSearch = function () {
+    this.$search.css('width', '25px');
+
+    var width = '';
+
+    if (this.$search.attr('placeholder') !== '') {
+      width = this.$selection.innerWidth();
+      width -= this.$selection.find('.rendered-selection').innerWidth();
+
+      width = width + 'px';
+    } else {
+      var minimumWidth = this.$search.val().length + 1;
+
+      width = (minimumWidth * 0.75) + 'em';
+    }
+
+    this.$search.css('width', width);
+  };
+
   Search.prototype.showSearch = function (_, params) {
     return true;
   };

dist/js/select2.amd.js

@@ -973,16 +973,6 @@ define('select2/selection/search',[
 
     decorated.call(this, container, $container);
 
-    this.$search.on('keydown', function (evt) {
-      self.trigger('keypress', evt);
-
-      self._keyUpPrevented = evt.isDefaultPrevented();
-    });
-
-    this.$search.on('keyup', function (evt) {
-      self.handleSearch(evt);
-    });
-
     container.on('open', function () {
       self.$search.attr('tabindex', 0);
 
@@ -995,13 +985,17 @@ define('select2/selection/search',[
       self.$search.val('');
     });
 
-    this.$search.off('keydown').on('keydown', function (evt) {
+    this.$selection.on('keydown', '.select2-search-inline', function (evt) {
       evt.stopPropagation();
 
       self.trigger('keypress', evt);
 
       self._keyUpPrevented = evt.isDefaultPrevented();
     });
+
+    this.$selection.on('keyup', '.select2-search-inline', function (evt) {
+      self.handleSearch(evt);
+    });
   };
 
   Search.prototype.createPlaceholder = function (decorated, placeholder) {
@@ -1014,9 +1008,13 @@ define('select2/selection/search',[
     decorated.call(this, data);
 
     this.$selection.find('.rendered-selection').append(this.$searchContainer);
+
+    this.resizeSearch();
   };
 
   Search.prototype.handleSearch = function (evt) {
+    this.resizeSearch();
+
     if (!this._keyUpPrevented) {
       var input = this.$search.val();
 
@@ -1028,6 +1026,25 @@ define('select2/selection/search',[
     this._keyUpPrevented = false;
   };
 
+  Search.prototype.resizeSearch = function () {
+    this.$search.css('width', '25px');
+
+    var width = '';
+
+    if (this.$search.attr('placeholder') !== '') {
+      width = this.$selection.innerWidth();
+      width -= this.$selection.find('.rendered-selection').innerWidth();
+
+      width = width + 'px';
+    } else {
+      var minimumWidth = this.$search.val().length + 1;
+
+      width = (minimumWidth * 0.75) + 'em';
+    }
+
+    this.$search.css('width', width);
+  };
+
   Search.prototype.showSearch = function (_, params) {
     return true;
   };

dist/js/select2.full.js

@@ -10508,16 +10508,6 @@ define('select2/selection/search',[
 
     decorated.call(this, container, $container);
 
-    this.$search.on('keydown', function (evt) {
-      self.trigger('keypress', evt);
-
-      self._keyUpPrevented = evt.isDefaultPrevented();
-    });
-
-    this.$search.on('keyup', function (evt) {
-      self.handleSearch(evt);
-    });
-
     container.on('open', function () {
       self.$search.attr('tabindex', 0);
 
@@ -10530,13 +10520,17 @@ define('select2/selection/search',[
       self.$search.val('');
     });
 
-    this.$search.off('keydown').on('keydown', function (evt) {
+    this.$selection.on('keydown', '.select2-search-inline', function (evt) {
       evt.stopPropagation();
 
       self.trigger('keypress', evt);
 
       self._keyUpPrevented = evt.isDefaultPrevented();
     });
+
+    this.$selection.on('keyup', '.select2-search-inline', function (evt) {
+      self.handleSearch(evt);
+    });
   };
 
   Search.prototype.createPlaceholder = function (decorated, placeholder) {
@@ -10549,9 +10543,13 @@ define('select2/selection/search',[
     decorated.call(this, data);
 
     this.$selection.find('.rendered-selection').append(this.$searchContainer);
+
+    this.resizeSearch();
   };
 
   Search.prototype.handleSearch = function (evt) {
+    this.resizeSearch();
+
     if (!this._keyUpPrevented) {
       var input = this.$search.val();
 
@@ -10563,6 +10561,25 @@ define('select2/selection/search',[
     this._keyUpPrevented = false;
   };
 
+  Search.prototype.resizeSearch = function () {
+    this.$search.css('width', '25px');
+
+    var width = '';
+
+    if (this.$search.attr('placeholder') !== '') {
+      width = this.$selection.innerWidth();
+      width -= this.$selection.find('.rendered-selection').innerWidth();
+
+      width = width + 'px';
+    } else {
+      var minimumWidth = this.$search.val().length + 1;
+
+      width = (minimumWidth * 0.75) + 'em';
+    }
+
+    this.$search.css('width', width);
+  };
+
   Search.prototype.showSearch = function (_, params) {
     return true;
   };

dist/js/select2.js

@@ -1401,16 +1401,6 @@ define('select2/selection/search',[
 
     decorated.call(this, container, $container);
 
-    this.$search.on('keydown', function (evt) {
-      self.trigger('keypress', evt);
-
-      self._keyUpPrevented = evt.isDefaultPrevented();
-    });
-
-    this.$search.on('keyup', function (evt) {
-      self.handleSearch(evt);
-    });
-
     container.on('open', function () {
       self.$search.attr('tabindex', 0);
 
@@ -1423,13 +1413,17 @@ define('select2/selection/search',[
       self.$search.val('');
     });
 
-    this.$search.off('keydown').on('keydown', function (evt) {
+    this.$selection.on('keydown', '.select2-search-inline', function (evt) {
       evt.stopPropagation();
 
       self.trigger('keypress', evt);
 
       self._keyUpPrevented = evt.isDefaultPrevented();
     });
+
+    this.$selection.on('keyup', '.select2-search-inline', function (evt) {
+      self.handleSearch(evt);
+    });
   };
 
   Search.prototype.createPlaceholder = function (decorated, placeholder) {
@@ -1442,9 +1436,13 @@ define('select2/selection/search',[
     decorated.call(this, data);
 
     this.$selection.find('.rendered-selection').append(this.$searchContainer);
+
+    this.resizeSearch();
   };
 
   Search.prototype.handleSearch = function (evt) {
+    this.resizeSearch();
+
     if (!this._keyUpPrevented) {
       var input = this.$search.val();
 
@@ -1456,6 +1454,25 @@ define('select2/selection/search',[
     this._keyUpPrevented = false;
   };
 
+  Search.prototype.resizeSearch = function () {
+    this.$search.css('width', '25px');
+
+    var width = '';
+
+    if (this.$search.attr('placeholder') !== '') {
+      width = this.$selection.innerWidth();
+      width -= this.$selection.find('.rendered-selection').innerWidth();
+
+      width = width + 'px';
+    } else {
+      var minimumWidth = this.$search.val().length + 1;
+
+      width = (minimumWidth * 0.75) + 'em';
+    }
+
+    this.$search.css('width', width);
+  };
+
   Search.prototype.showSearch = function (_, params) {
     return true;
   };

src/js/select2/selection/search.js

@@ -25,16 +25,6 @@ define([
 
     decorated.call(this, container, $container);
 
-    this.$search.on('keydown', function (evt) {
-      self.trigger('keypress', evt);
-
-      self._keyUpPrevented = evt.isDefaultPrevented();
-    });
-
-    this.$search.on('keyup', function (evt) {
-      self.handleSearch(evt);
-    });
-
     container.on('open', function () {
       self.$search.attr('tabindex', 0);
 
@@ -47,13 +37,17 @@ define([
       self.$search.val('');
     });
 
-    this.$search.off('keydown').on('keydown', function (evt) {
+    this.$selection.on('keydown', '.select2-search-inline', function (evt) {
       evt.stopPropagation();
 
       self.trigger('keypress', evt);
 
       self._keyUpPrevented = evt.isDefaultPrevented();
     });
+
+    this.$selection.on('keyup', '.select2-search-inline', function (evt) {
+      self.handleSearch(evt);
+    });
   };
 
   Search.prototype.createPlaceholder = function (decorated, placeholder) {
@@ -66,9 +60,13 @@ define([
     decorated.call(this, data);
 
     this.$selection.find('.rendered-selection').append(this.$searchContainer);
+
+    this.resizeSearch();
   };
 
   Search.prototype.handleSearch = function (evt) {
+    this.resizeSearch();
+
     if (!this._keyUpPrevented) {
       var input = this.$search.val();
 
@@ -80,6 +78,25 @@ define([
     this._keyUpPrevented = false;
   };
 
+  Search.prototype.resizeSearch = function () {
+    this.$search.css('width', '25px');
+
+    var width = '';
+
+    if (this.$search.attr('placeholder') !== '') {
+      width = this.$selection.innerWidth();
+      width -= this.$selection.find('.rendered-selection').innerWidth();
+
+      width = width + 'px';
+    } else {
+      var minimumWidth = this.$search.val().length + 1;
+
+      width = (minimumWidth * 0.75) + 'em';
+    }
+
+    this.$search.css('width', width);
+  };
+
   Search.prototype.showSearch = function (_, params) {
     return true;
   };

src/scss/theme/default/layout.scss

@@ -19,6 +19,7 @@
       background-color: white;
       border: 1px solid #aaa;
       border-radius: 4px;
+      cursor: text;
 
       .rendered-selection {
         list-style: none;
@@ -38,6 +39,7 @@
 
           border: 1px solid #aaa;
           border-radius: 4px;
+          cursor: default;
 
           float: left;
 
@@ -47,6 +49,8 @@
 
           .remove {
             color: #999;
+            cursor: pointer;
+
             display: inline-block;
             font-weight: bold;
 
@@ -77,6 +81,13 @@
     }
   }
 
+  .select2-search-inline {
+    input {
+      border: none;
+      outline: 0;
+    }
+  }
+
   .dropdown {
     .results {
       &> .options {