diff --git a/examples/basic.html b/examples/basic.html index 34279d95d..1958ce16f 100644 --- a/examples/basic.html +++ b/examples/basic.html @@ -20,6 +20,100 @@

Selectize.js

+
+

<select>

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

<select>

+
+ + +
+ +
+ +
+

<select>

+
+ + +
+ +
+ +
+

<select>

+
+ + +
+ +
+

<input type="text">

diff --git a/src/defaults.js b/src/defaults.js index 0c7560022..5eb4b04b8 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -54,7 +54,11 @@ Selectize.defaults = { dropdownParent: null, copyClassesToDropdown: true, - + 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) { ... } score : null, // function(search) { ... } diff --git a/src/selectize.js b/src/selectize.js index 0d1565bcb..770a301bb 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; @@ -1904,7 +1905,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 +1958,29 @@ $.extend(Selectize.prototype, { }); }, + setupDropdownHeight: function () { + if (typeof this.settings.dropdownSize === 'object' && this.settings.dropdownSize.sizeType !== 'auto') { + var height = this.settings.dropdownSize.sizeValue; + + if (this.settings.dropdownSize.sizeType === 'numberItems') { + 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. diff --git a/test/setup.js b/test/setup.js index 38ad01887..385433072 100644 --- a/test/setup.js +++ b/test/setup.js @@ -403,6 +403,54 @@ }); }); + describe('' + + '' + + '' + + '' + + '' + + '', { + dropdownSize: { sizeType: 'numberItems', sizeValue: 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('' + + '' + + '' + + '', { + dropdownSize: { sizeType: 'fixedHeight', sizeValue: 100 } + }); + }); + + it('should dropdown height to be equal 100', function(done) { + test.selectize.focus(); + + window.setTimeout(function () { + expect(test.selectize.$dropdown_content.height()).to.be.equal(100); + done(); + }, 0); + }); + }); + }); })();