Skip to content

Commit 1960052

Browse files
risadamsrisadams
authored
Merge pull request #1875 from fabienwnklr/master
Feature : add 'size' option for custom dropdown height
2 parents 5902dae + 5b3c18b commit 1960052

File tree

4 files changed

+174
-3
lines changed

4 files changed

+174
-3
lines changed

‎examples/basic.html

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,100 @@
2020
<div id="wrapper">
2121
<h1>Selectize.js</h1>
2222

23+
<div class="demo">
24+
<h2>&lt;select&gt;</h2>
25+
<div class="control-group">
26+
<span>Search with any accent : <pre>["à", "è", "ì", "ò", "ù", "À", "È", "Ì", "Ò", "Ù", "á", "é", "í", "ó", "ú", "ý", "Á", "É", "Í", "Ó", "Ú", "Ý", "â", "ê", "î", "ô", "û", "Â", "Ê", "Î", "Ô", "Û", "ã", "ñ", "õ", "Õ", "Ã", "Ñ", "ä", "ë", "ï", "ö", "ü", "ÿ", "Ä", "Ë", "Ï", "Ö", "Ü", "Ÿ", "ç", "Ç", "å", "Å"];</pre></span>
27+
<label for="normalize">Beast: Normalize: true / case insensitive</label>
28+
<select id="normalize" class="demo-default">
29+
<option value=""></option>
30+
<option value="1">Awosome</option>
31+
<option value="2">Beast</option>
32+
<option value="3">Compatible</option>
33+
<option value="4">Thomas Edison</option>
34+
<option value="5">Nikola</option>
35+
<option value="6">Selectize</option>
36+
<option value="7">Javascript</option>
37+
</select>
38+
</div>
39+
<script>
40+
$('#normalize').selectize({
41+
normalize: true
42+
});
43+
44+
</script>
45+
</div>
46+
47+
<div class="demo">
48+
<h2>&lt;select&gt;</h2>
49+
<div class="control-group">
50+
<label for="size-number">Beast: size by items count</label>
51+
<select id="size-number" class="demo-default" placeholder="Select a person...">
52+
<option value="1">one</option>
53+
<option value="2">two</option>
54+
<option value="3">three</option>
55+
<option value="4">four</option>
56+
<option value="5">five</option>
57+
<option value="6">six</option>
58+
<option value="7">seven</option>
59+
<option value="8">eight</option>
60+
<option value="9">nine</option>
61+
<option value="10">ten</option>
62+
</select>
63+
</div>
64+
<script>
65+
$('#size-number').selectize({
66+
dropdownSize: { sizeType: 'numberItems', sizeValue: 8 }
67+
});
68+
</script>
69+
</div>
70+
71+
<div class="demo">
72+
<h2>&lt;select&gt;</h2>
73+
<div class="control-group">
74+
<label for="size-px">Beast: size by px height (also available with rem, em, vh)</label>
75+
<select id="size-px" class="demo-default" placeholder="Select a person...">
76+
<option value="1">one</option>
77+
<option value="2">two</option>
78+
<option value="3">three</option>
79+
<option value="4">four</option>
80+
<option value="5">five</option>
81+
<option value="6">six</option>
82+
<option value="7">seven</option>
83+
<option value="8">eight</option>
84+
<option value="9">nine</option>
85+
<option value="10">ten</option>
86+
</select>
87+
</div>
88+
<script>
89+
$('#size-px').selectize({
90+
dropdownSize: { sizeType: 'fixedHeight', sizeValue: 100 }
91+
});
92+
</script>
93+
</div>
94+
95+
<div class="demo">
96+
<h2>&lt;select&gt;</h2>
97+
<div class="control-group">
98+
<label for="size-false">Beast: size false (auto)</label>
99+
<select id="size-false" class="demo-default" placeholder="Select a person...">
100+
<option value="1">one</option>
101+
<option value="2">two</option>
102+
<option value="3">three</option>
103+
<option value="4">four</option>
104+
<option value="5">five</option>
105+
<option value="6">six</option>
106+
<option value="7">seven</option>
107+
<option value="8">eight</option>
108+
<option value="9">nine</option>
109+
<option value="10">ten</option>
110+
</select>
111+
</div>
112+
<script>
113+
$('#size-false').selectize();
114+
</script>
115+
</div>
116+
23117
<div class="demo">
24118
<h2>&lt;input type="text"&gt;</h2>
25119
<div class="control-group">

‎src/defaults.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,11 @@ Selectize.defaults = {
5454
dropdownParent: null,
5555

5656
copyClassesToDropdown: true,
57-
57+
dropdownSize: {
58+
sizeType: 'auto', // 'numberItems' or 'fixedHeight'
59+
sizeValue: 'auto', // number of items or height value (px is default) or CSS height (px, rem, em, vh)
60+
},
61+
normalize: false,
5862
/*
5963
load : null, // function(query, callback) { ... }
6064
score : null, // function(search) { ... }

‎src/selectize.js

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1091,7 +1091,8 @@ $.extend(Selectize.prototype, {
10911091
}
10921092

10931093
// perform search
1094-
if (query !== self.lastQuery) {
1094+
if (query !== self.lastQuery) {
1095+
if (settings.normalize) query = query.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
10951096
self.lastQuery = query;
10961097
result = self.sifter.search(query, $.extend(options, {score: calculateScore}));
10971098
self.currentResults = result;
@@ -1904,7 +1905,8 @@ $.extend(Selectize.prototype, {
19041905
self.focus();
19051906
self.isOpen = true;
19061907
self.refreshState();
1907-
self.$dropdown.css({visibility: 'hidden', display: 'block'});
1908+
self.$dropdown.css({ visibility: 'hidden', display: 'block' });
1909+
self.setupDropdownHeight();
19081910
self.positionDropdown();
19091911
self.$dropdown.css({visibility: 'visible'});
19101912
self.trigger('dropdown_open', self.$dropdown);
@@ -1956,6 +1958,29 @@ $.extend(Selectize.prototype, {
19561958
});
19571959
},
19581960

1961+
setupDropdownHeight: function () {
1962+
if (typeof this.settings.dropdownSize === 'object' && this.settings.dropdownSize.sizeType !== 'auto') {
1963+
var height = this.settings.dropdownSize.sizeValue;
1964+
1965+
if (this.settings.dropdownSize.sizeType === 'numberItems') {
1966+
var $items = this.$dropdown_content.children();
1967+
var totalHeight = 0;
1968+
1969+
$items.each(function (i, $item) {
1970+
if (i === height) return false;
1971+
1972+
totalHeight += $($item).outerHeight(true);
1973+
});
1974+
1975+
// Get padding top for subtract to global height to avoid seeing the next item
1976+
var padding = this.$dropdown_content.css('padding-top') ? this.$dropdown_content.css('padding-top').replace(/\W*(\w)\w*/g, '$1') : 0;
1977+
height = (totalHeight - padding) + 'px';
1978+
}
1979+
1980+
this.$dropdown_content.css({ height: height, maxHeight: 'none' });
1981+
}
1982+
},
1983+
19591984
/**
19601985
* Resets / clears all selected items
19611986
* from the control.

‎test/setup.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -403,6 +403,54 @@
403403
});
404404
});
405405

406+
describe('<select> custom size (number)', function() {
407+
var test;
408+
409+
beforeEach(function() {
410+
test = setup_test('<select>' +
411+
'<option value="">Select an option...</option>' +
412+
'<option value="a">A</option>' +
413+
'<option value="b">B</option>' +
414+
'<option value="c">C</option>' +
415+
'</select>', {
416+
dropdownSize: { sizeType: 'numberItems', sizeValue: 1 }
417+
});
418+
});
419+
420+
it('should adapt dropdown height', function(done) {
421+
test.selectize.focus();
422+
423+
window.setTimeout(function () {
424+
var padding = test.selectize.$dropdown_content.css('padding-top') ? test.selectize.$dropdown_content.css('padding-top').replace(/\W*(\w)\w*/g, '$1') : 0;
425+
var heightExpected = test.selectize.$dropdown_content.find('.option').first().outerHeight(true) - padding;
426+
expect(test.selectize.$dropdown_content.height()).to.be.equal(heightExpected);
427+
done();
428+
}, 0);
429+
});
430+
});
431+
432+
describe('<select> custom size (css height)', function() {
433+
var test;
434+
435+
beforeEach(function() {
436+
test = setup_test('<select>' +
437+
'<option value="">Select an option...</option>' +
438+
'<option value="a">A</option>' +
439+
'</select>', {
440+
dropdownSize: { sizeType: 'fixedHeight', sizeValue: 100 }
441+
});
442+
});
443+
444+
it('should dropdown height to be equal 100', function(done) {
445+
test.selectize.focus();
446+
447+
window.setTimeout(function () {
448+
expect(test.selectize.$dropdown_content.height()).to.be.equal(100);
449+
done();
450+
}, 0);
451+
});
452+
});
453+
406454
});
407455

408456
})();

0 commit comments

Comments
 (0)