Skip to content

Commit

Permalink
Merge pull request #1875 from fabienwnklr/master
Browse files Browse the repository at this point in the history 
Feature : add 'size' option for custom dropdown height
  • Loading branch information
@risadams
risadams authored Sep 27, 2022
2 parents 5902dae + 5b3c18b commit 1960052
Show file tree
Hide file tree
Showing 4 changed files with 174 additions and 3 deletions.
94 changes: 94 additions & 0 deletions examples/basic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,100 @@
<div id="wrapper">
<h1>Selectize.js</h1>

<div class="demo">
<h2>&lt;select&gt;</h2>
<div class="control-group">
<span>Search with any accent : <pre>["à", "è", "ì", "ò", "ù", "À", "È", "Ì", "Ò", "Ù", "á", "é", "í", "ó", "ú", "ý", "Á", "É", "Í", "Ó", "Ú", "Ý", "â", "ê", "î", "ô", "û", "Â", "Ê", "Î", "Ô", "Û", "ã", "ñ", "õ", "Õ", "Ã", "Ñ", "ä", "ë", "ï", "ö", "ü", "ÿ", "Ä", "Ë", "Ï", "Ö", "Ü", "Ÿ", "ç", "Ç", "å", "Å"];</pre></span>
<label for="normalize">Beast: Normalize: true / case insensitive</label>
<select id="normalize" class="demo-default">
<option value=""></option>
<option value="1">Awosome</option>
<option value="2">Beast</option>
<option value="3">Compatible</option>
<option value="4">Thomas Edison</option>
<option value="5">Nikola</option>
<option value="6">Selectize</option>
<option value="7">Javascript</option>
</select>
</div>
<script>
$('#normalize').selectize({
normalize: true
});

</script>
</div>

<div class="demo">
<h2>&lt;select&gt;</h2>
<div class="control-group">
<label for="size-number">Beast: size by items count</label>
<select id="size-number" class="demo-default" placeholder="Select a person...">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
<option value="5">five</option>
<option value="6">six</option>
<option value="7">seven</option>
<option value="8">eight</option>
<option value="9">nine</option>
<option value="10">ten</option>
</select>
</div>
<script>
$('#size-number').selectize({
dropdownSize: { sizeType: 'numberItems', sizeValue: 8 }
});
</script>
</div>

<div class="demo">
<h2>&lt;select&gt;</h2>
<div class="control-group">
<label for="size-px">Beast: size by px height (also available with rem, em, vh)</label>
<select id="size-px" class="demo-default" placeholder="Select a person...">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
<option value="5">five</option>
<option value="6">six</option>
<option value="7">seven</option>
<option value="8">eight</option>
<option value="9">nine</option>
<option value="10">ten</option>
</select>
</div>
<script>
$('#size-px').selectize({
dropdownSize: { sizeType: 'fixedHeight', sizeValue: 100 }
});
</script>
</div>

<div class="demo">
<h2>&lt;select&gt;</h2>
<div class="control-group">
<label for="size-false">Beast: size false (auto)</label>
<select id="size-false" class="demo-default" placeholder="Select a person...">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
<option value="5">five</option>
<option value="6">six</option>
<option value="7">seven</option>
<option value="8">eight</option>
<option value="9">nine</option>
<option value="10">ten</option>
</select>
</div>
<script>
$('#size-false').selectize();
</script>
</div>

<div class="demo">
<h2>&lt;input type="text"&gt;</h2>
<div class="control-group">
Expand Down
6 changes: 5 additions & 1 deletion src/defaults.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) { ... }
Expand Down
29 changes: 27 additions & 2 deletions src/selectize.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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.
Expand Down
48 changes: 48 additions & 0 deletions test/setup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -403,6 +403,54 @@
});
});

describe('<select> custom size (number)', function() {
var test;

beforeEach(function() {
test = setup_test('<select>' +
'<option value="">Select an option...</option>' +
'<option value="a">A</option>' +
'<option value="b">B</option>' +
'<option value="c">C</option>' +
'</select>', {
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('<select> custom size (css height)', function() {
var test;

beforeEach(function() {
test = setup_test('<select>' +
'<option value="">Select an option...</option>' +
'<option value="a">A</option>' +
'</select>', {
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);
});
});

});

})();

0 comments on commit 1960052

Please sign in to comment.