RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-22 13:06:08 +03:00
Code Issues Projects Releases Wiki Activity

Automatically resize the search box

Browse Source 
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.
This commit is contained in:
Kevin Brown 2014-11-22 20:32:25 -05:00
parent 217cd4cfd0
commit f1c02db189
10 changed files with 162 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dist/css/select2.css vendored
View File

@ -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; }

2
dist/css/select2.min.css vendored
View File

File diff suppressed because one or more lines are too long

39
dist/js/select2.amd.full.js vendored
View File

@ -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;
};

39
dist/js/select2.amd.js vendored
View File

@ -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;
};

39
dist/js/select2.full.js vendored
View File

@ -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;
};

2
dist/js/select2.full.min.js vendored
View File

File diff suppressed because one or more lines are too long

39
dist/js/select2.js vendored
View File

@ -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;
};

4
dist/js/select2.min.js vendored
View File

File diff suppressed because one or more lines are too long

39
src/js/select2/selection/search.js vendored
View File

@ -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;
};

11
src/scss/theme/default/layout.scss
View File

@ -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 {