From 0687ce4defe2fef0aa32cad0ca80f48b482548dc Mon Sep 17 00:00:00 2001 From: WINKLER Fabien Date: Fri, 23 Sep 2022 13:58:12 +0200 Subject: [PATCH 1/4] Feat : add 'size' option --- examples/basic.html | 72 +++++++++++++++++++++++++++++++++++++++++++++ src/defaults.js | 2 +- src/selectize.js | 26 +++++++++++++++- 3 files changed, 98 insertions(+), 2 deletions(-) diff --git a/examples/basic.html b/examples/basic.html index 34279d95d..02abd80b4 100644 --- a/examples/basic.html +++ b/examples/basic.html @@ -20,6 +20,78 @@

Selectize.js

+
+

<select>

+
+ + +
+ +
+ +
+

<select>

+
+ + +
+ +
+ +
+

<select>

+
+ + +
+ +
+

<input type="text">

diff --git a/src/defaults.js b/src/defaults.js index 0c7560022..bdd9be74c 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -54,7 +54,7 @@ Selectize.defaults = { dropdownParent: null, copyClassesToDropdown: true, - + size: false, // must be a number items displayed or height (px, em, rem, vh) /* load : null, // function(query, callback) { ... } score : null, // function(search) { ... } diff --git a/src/selectize.js b/src/selectize.js index 0d1565bcb..9bff3fc6e 100644 --- a/src/selectize.js +++ b/src/selectize.js @@ -1904,7 +1904,8 @@ $.extend(Selectize.prototype, { self.focus(); self.isOpen = true; self.refreshState(); - self.$dropdown.css({visibility: 'hidden', display: 'block'}); + self.$dropdown.css({ visibility: 'hidden', display: 'block' }); + self.setupDropdownHeight(); self.positionDropdown(); self.$dropdown.css({visibility: 'visible'}); self.trigger('dropdown_open', self.$dropdown); @@ -1956,6 +1957,29 @@ $.extend(Selectize.prototype, { }); }, + setupDropdownHeight: function () { + if (this.settings.size) { + var height = this.settings.size; + + if (!isNaN(height)) { + var $items = this.$dropdown_content.children(); + var totalHeight = 0; + + $items.each(function (i, $item) { + if (i === height) return false; + + totalHeight += $($item).outerHeight(true); + }); + + // Get padding top for subtract to global height to avoid seeing the next item + var padding = this.$dropdown_content.css('padding-top') ? this.$dropdown_content.css('padding-top').replace(/\W*(\w)\w*/g, '$1') : 0; + height = (totalHeight - padding) + 'px'; + } + + this.$dropdown_content.css({ height: height, maxHeight: 'none' }); + } + }, + /** * Resets / clears all selected items * from the control. From 181f8ae8b49b25b131ced46954dae8c800a4049b Mon Sep 17 00:00:00 2001 From: WINKLER Fabien Date: Fri, 23 Sep 2022 14:35:24 +0200 Subject: [PATCH 2/4] Test : add test for 'size' option --- test/setup.js | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/test/setup.js b/test/setup.js index 38ad01887..696e8185d 100644 --- a/test/setup.js +++ b/test/setup.js @@ -403,6 +403,54 @@ }); }); + describe('' + + '' + + '' + + '' + + '' + + '', { + size: 1 + }); + }); + + it('should adapt dropdown height', function(done) { + test.selectize.focus(); + + window.setTimeout(function () { + var padding = test.selectize.$dropdown_content.css('padding-top') ? test.selectize.$dropdown_content.css('padding-top').replace(/\W*(\w)\w*/g, '$1') : 0; + var heightExpected = test.selectize.$dropdown_content.find('.option').first().outerHeight(true) - padding; + expect(test.selectize.$dropdown_content.height()).to.be.equal(heightExpected); + done(); + }, 0); + }); + }); + + describe('' + + '' + + '' + + '', { + size: '100px' + }); + }); + + it('should dropdown height to be equal 100px', function(done) { + test.selectize.focus(); + + window.setTimeout(function () { + expect(test.selectize.$dropdown_content.height()).to.be.equal(100); + done(); + }, 0); + }); + }); + }); })(); From b42cb4bfbb758eb7ac649d202d68360d35a90fed Mon Sep 17 00:00:00 2001 From: WINKLER Fabien Date: Fri, 23 Sep 2022 15:47:25 +0200 Subject: [PATCH 3/4] Feat: normalize option --- examples/basic.html | 24 ++++++++++++++++++++++++ src/defaults.js | 1 + src/selectize.js | 3 ++- 3 files changed, 27 insertions(+), 1 deletion(-) diff --git a/examples/basic.html b/examples/basic.html index 02abd80b4..69ac075e8 100644 --- a/examples/basic.html +++ b/examples/basic.html @@ -20,6 +20,30 @@

Selectize.js

+
+

<select>

+
+ Search with any accent : 
["à", "è", "ì", "ò", "ù", "À", "È", "Ì", "Ò", "Ù", "á", "é", "í", "ó", "ú", "ý", "Á", "É", "Í", "Ó", "Ú", "Ý", "â", "ê", "î", "ô", "û", "Â", "Ê", "Î", "Ô", "Û", "ã", "ñ", "õ", "Õ", "Ã", "Ñ", "ä", "ë", "ï", "ö", "ü", "ÿ", "Ä", "Ë", "Ï", "Ö", "Ü", "Ÿ", "ç", "Ç", "å", "Å"];
 + + +
+ +
+

<select>

diff --git a/src/defaults.js b/src/defaults.js index bdd9be74c..a654279e7 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -55,6 +55,7 @@ Selectize.defaults = { copyClassesToDropdown: true, size: false, // must be a number items displayed or height (px, em, rem, vh) + normalize: false, /* load : null, // function(query, callback) { ... } score : null, // function(search) { ... } diff --git a/src/selectize.js b/src/selectize.js index 9bff3fc6e..502c568b6 100644 --- a/src/selectize.js +++ b/src/selectize.js @@ -1091,7 +1091,8 @@ $.extend(Selectize.prototype, { } // perform search - if (query !== self.lastQuery) { + if (query !== self.lastQuery) { + if (settings.normalize) query = query.normalize("NFD").replace(/[\u0300-\u036f]/g, ""); self.lastQuery = query; result = self.sifter.search(query, $.extend(options, {score: calculateScore})); self.currentResults = result; From 5b3c18b89810fcb32212014d069b2fde7516fce7 Mon Sep 17 00:00:00 2001 From: WINKLER Fabien Date: Tue, 27 Sep 2022 13:59:21 +0200 Subject: [PATCH 4/4] Fix change property name for better understanding --- examples/basic.html | 10 ++++------ src/defaults.js | 5 ++++- src/selectize.js | 6 +++--- test/setup.js | 6 +++--- 4 files changed, 14 insertions(+), 13 deletions(-) diff --git a/examples/basic.html b/examples/basic.html index 69ac075e8..1958ce16f 100644 --- a/examples/basic.html +++ b/examples/basic.html @@ -63,7 +63,7 @@

<select>

@@ -87,8 +87,8 @@

<select>

@@ -110,9 +110,7 @@

<select>

diff --git a/src/defaults.js b/src/defaults.js index a654279e7..5eb4b04b8 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -54,7 +54,10 @@ Selectize.defaults = { dropdownParent: null, copyClassesToDropdown: true, - size: false, // must be a number items displayed or height (px, em, rem, vh) + dropdownSize: { + sizeType: 'auto', // 'numberItems' or 'fixedHeight' + sizeValue: 'auto', // number of items or height value (px is default) or CSS height (px, rem, em, vh) + }, normalize: false, /* load : null, // function(query, callback) { ... } diff --git a/src/selectize.js b/src/selectize.js index 502c568b6..770a301bb 100644 --- a/src/selectize.js +++ b/src/selectize.js @@ -1959,10 +1959,10 @@ $.extend(Selectize.prototype, { }, setupDropdownHeight: function () { - if (this.settings.size) { - var height = this.settings.size; + if (typeof this.settings.dropdownSize === 'object' && this.settings.dropdownSize.sizeType !== 'auto') { + var height = this.settings.dropdownSize.sizeValue; - if (!isNaN(height)) { + if (this.settings.dropdownSize.sizeType === 'numberItems') { var $items = this.$dropdown_content.children(); var totalHeight = 0; diff --git a/test/setup.js b/test/setup.js index 696e8185d..385433072 100644 --- a/test/setup.js +++ b/test/setup.js @@ -413,7 +413,7 @@ '' + '' + '', { - size: 1 + dropdownSize: { sizeType: 'numberItems', sizeValue: 1 } }); }); @@ -437,11 +437,11 @@ '' + '' + '', { - size: '100px' + dropdownSize: { sizeType: 'fixedHeight', sizeValue: 100 } }); }); - it('should dropdown height to be equal 100px', function(done) { + it('should dropdown height to be equal 100', function(done) { test.selectize.focus(); window.setTimeout(function () {