Skip to content

Commit f1c02db

Browse files
kevin-brownkevin-brown
committed
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.
1 parent 217cd4c commit f1c02db

10 files changed

Lines changed: 162 additions & 60 deletions

File tree

‎dist/css/select2.css‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,8 @@
8383
.select2-container.select2-theme-default .selection .multiple-select {
8484
background-color: white;
8585
border: 1px solid #aaa;
86-
border-radius: 4px; }
86+
border-radius: 4px;
87+
cursor: text; }
8788
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection {
8889
list-style: none;
8990
margin: 0;
@@ -96,12 +97,14 @@
9697
background-color: #e4e4e4;
9798
border: 1px solid #aaa;
9899
border-radius: 4px;
100+
cursor: default;
99101
float: left;
100102
margin-right: 5px;
101103
margin-top: 5px;
102104
padding: 0 5px; }
103105
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice .remove {
104106
color: #999;
107+
cursor: pointer;
105108
display: inline-block;
106109
font-weight: bold;
107110
margin-right: 2px; }
@@ -112,6 +115,9 @@
112115
border-bottom-right-radius: 0; }
113116
.select2-container.select2-theme-default .select2-search input {
114117
border: 1px solid #aaa; }
118+
.select2-container.select2-theme-default .select2-search-inline input {
119+
border: none;
120+
outline: 0; }
115121
.select2-container.select2-theme-default .dropdown .results > .options {
116122
max-height: 200px;
117123
overflow-y: auto; }

‎dist/css/select2.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -973,16 +973,6 @@ define('select2/selection/search',[
973973

974974
decorated.call(this, container, $container);
975975

976-
this.$search.on('keydown', function (evt) {
977-
self.trigger('keypress', evt);
978-
979-
self._keyUpPrevented = evt.isDefaultPrevented();
980-
});
981-
982-
this.$search.on('keyup', function (evt) {
983-
self.handleSearch(evt);
984-
});
985-
986976
container.on('open', function () {
987977
self.$search.attr('tabindex', 0);
988978

@@ -995,13 +985,17 @@ define('select2/selection/search',[
995985
self.$search.val('');
996986
});
997987

998-
this.$search.off('keydown').on('keydown', function (evt) {
988+
this.$selection.on('keydown', '.select2-search-inline', function (evt) {
999989
evt.stopPropagation();
1000990

1001991
self.trigger('keypress', evt);
1002992

1003993
self._keyUpPrevented = evt.isDefaultPrevented();
1004994
});
995+
996+
this.$selection.on('keyup', '.select2-search-inline', function (evt) {
997+
self.handleSearch(evt);
998+
});
1005999
};
10061000

10071001
Search.prototype.createPlaceholder = function (decorated, placeholder) {
@@ -1014,9 +1008,13 @@ define('select2/selection/search',[
10141008
decorated.call(this, data);
10151009

10161010
this.$selection.find('.rendered-selection').append(this.$searchContainer);
1011+
1012+
this.resizeSearch();
10171013
};
10181014

10191015
Search.prototype.handleSearch = function (evt) {
1016+
this.resizeSearch();
1017+
10201018
if (!this._keyUpPrevented) {
10211019
var input = this.$search.val();
10221020

@@ -1028,6 +1026,25 @@ define('select2/selection/search',[
10281026
this._keyUpPrevented = false;
10291027
};
10301028

1029+
Search.prototype.resizeSearch = function () {
1030+
this.$search.css('width', '25px');
1031+
1032+
var width = '';
1033+
1034+
if (this.$search.attr('placeholder') !== '') {
1035+
width = this.$selection.innerWidth();
1036+
width -= this.$selection.find('.rendered-selection').innerWidth();
1037+
1038+
width = width + 'px';
1039+
} else {
1040+
var minimumWidth = this.$search.val().length + 1;
1041+
1042+
width = (minimumWidth * 0.75) + 'em';
1043+
}
1044+
1045+
this.$search.css('width', width);
1046+
};
1047+
10311048
Search.prototype.showSearch = function (_, params) {
10321049
return true;
10331050
};

‎dist/js/select2.amd.js‎

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -973,16 +973,6 @@ define('select2/selection/search',[
973973

974974
decorated.call(this, container, $container);
975975

976-
this.$search.on('keydown', function (evt) {
977-
self.trigger('keypress', evt);
978-
979-
self._keyUpPrevented = evt.isDefaultPrevented();
980-
});
981-
982-
this.$search.on('keyup', function (evt) {
983-
self.handleSearch(evt);
984-
});
985-
986976
container.on('open', function () {
987977
self.$search.attr('tabindex', 0);
988978

@@ -995,13 +985,17 @@ define('select2/selection/search',[
995985
self.$search.val('');
996986
});
997987

998-
this.$search.off('keydown').on('keydown', function (evt) {
988+
this.$selection.on('keydown', '.select2-search-inline', function (evt) {
999989
evt.stopPropagation();
1000990

1001991
self.trigger('keypress', evt);
1002992

1003993
self._keyUpPrevented = evt.isDefaultPrevented();
1004994
});
995+
996+
this.$selection.on('keyup', '.select2-search-inline', function (evt) {
997+
self.handleSearch(evt);
998+
});
1005999
};
10061000

10071001
Search.prototype.createPlaceholder = function (decorated, placeholder) {
@@ -1014,9 +1008,13 @@ define('select2/selection/search',[
10141008
decorated.call(this, data);
10151009

10161010
this.$selection.find('.rendered-selection').append(this.$searchContainer);
1011+
1012+
this.resizeSearch();
10171013
};
10181014

10191015
Search.prototype.handleSearch = function (evt) {
1016+
this.resizeSearch();
1017+
10201018
if (!this._keyUpPrevented) {
10211019
var input = this.$search.val();
10221020

@@ -1028,6 +1026,25 @@ define('select2/selection/search',[
10281026
this._keyUpPrevented = false;
10291027
};
10301028

1029+
Search.prototype.resizeSearch = function () {
1030+
this.$search.css('width', '25px');
1031+
1032+
var width = '';
1033+
1034+
if (this.$search.attr('placeholder') !== '') {
1035+
width = this.$selection.innerWidth();
1036+
width -= this.$selection.find('.rendered-selection').innerWidth();
1037+
1038+
width = width + 'px';
1039+
} else {
1040+
var minimumWidth = this.$search.val().length + 1;
1041+
1042+
width = (minimumWidth * 0.75) + 'em';
1043+
}
1044+
1045+
this.$search.css('width', width);
1046+
};
1047+
10311048
Search.prototype.showSearch = function (_, params) {
10321049
return true;
10331050
};

‎dist/js/select2.full.js‎

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10508,16 +10508,6 @@ define('select2/selection/search',[
1050810508

1050910509
decorated.call(this, container, $container);
1051010510

10511-
this.$search.on('keydown', function (evt) {
10512-
self.trigger('keypress', evt);
10513-
10514-
self._keyUpPrevented = evt.isDefaultPrevented();
10515-
});
10516-
10517-
this.$search.on('keyup', function (evt) {
10518-
self.handleSearch(evt);
10519-
});
10520-
1052110511
container.on('open', function () {
1052210512
self.$search.attr('tabindex', 0);
1052310513

@@ -10530,13 +10520,17 @@ define('select2/selection/search',[
1053010520
self.$search.val('');
1053110521
});
1053210522

10533-
this.$search.off('keydown').on('keydown', function (evt) {
10523+
this.$selection.on('keydown', '.select2-search-inline', function (evt) {
1053410524
evt.stopPropagation();
1053510525

1053610526
self.trigger('keypress', evt);
1053710527

1053810528
self._keyUpPrevented = evt.isDefaultPrevented();
1053910529
});
10530+
10531+
this.$selection.on('keyup', '.select2-search-inline', function (evt) {
10532+
self.handleSearch(evt);
10533+
});
1054010534
};
1054110535

1054210536
Search.prototype.createPlaceholder = function (decorated, placeholder) {
@@ -10549,9 +10543,13 @@ define('select2/selection/search',[
1054910543
decorated.call(this, data);
1055010544

1055110545
this.$selection.find('.rendered-selection').append(this.$searchContainer);
10546+
10547+
this.resizeSearch();
1055210548
};
1055310549

1055410550
Search.prototype.handleSearch = function (evt) {
10551+
this.resizeSearch();
10552+
1055510553
if (!this._keyUpPrevented) {
1055610554
var input = this.$search.val();
1055710555

@@ -10563,6 +10561,25 @@ define('select2/selection/search',[
1056310561
this._keyUpPrevented = false;
1056410562
};
1056510563

10564+
Search.prototype.resizeSearch = function () {
10565+
this.$search.css('width', '25px');
10566+
10567+
var width = '';
10568+
10569+
if (this.$search.attr('placeholder') !== '') {
10570+
width = this.$selection.innerWidth();
10571+
width -= this.$selection.find('.rendered-selection').innerWidth();
10572+
10573+
width = width + 'px';
10574+
} else {
10575+
var minimumWidth = this.$search.val().length + 1;
10576+
10577+
width = (minimumWidth * 0.75) + 'em';
10578+
}
10579+
10580+
this.$search.css('width', width);
10581+
};
10582+
1056610583
Search.prototype.showSearch = function (_, params) {
1056710584
return true;
1056810585
};

‎dist/js/select2.full.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)