Skip to content
This repository was archived by the owner on Oct 15, 2024. It is now read-only.

Commit 47359f2

Browse files
dnasirdnasir
committed
Addresses issues #16 and #18
* Updated demo to show that multiselect is supported.
1 parent 406ff2a commit 47359f2

File tree

2 files changed

+181
-67
lines changed

2 files changed

+181
-67
lines changed

‎ajax-mocks.js‎

Lines changed: 96 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,107 @@
11
// Some mockjax code to simulate Ajax calls
22
var phoneList = [
3-
{
4-
maker: 'HTC',
5-
model: 'One S',
6-
screen: 4.3,
7-
resolution: 540,
8-
storage: [8, 16]
9-
},
10-
{
11-
maker: 'Samsung',
12-
model: 'Galaxy S4',
13-
screen: 5,
14-
resolution: 1080,
15-
storage: [16, 32, 64]
16-
},
17-
{
18-
maker: 'HTC',
19-
model: 'One',
20-
screen: 4.7,
21-
resolution: 1080,
22-
storage: [32, 64]
23-
},
24-
{
25-
maker: 'Motorola',
26-
model: 'Droid 4',
27-
screen: 4,
28-
resolution: 540,
29-
storage: [8]
30-
},
31-
{
32-
maker: 'Motorola',
33-
model: 'Droid RAZR HD',
34-
screen: 4.7,
35-
resolution: 720,
36-
storage: [16]
37-
},
38-
{
39-
maker: 'LG',
40-
model: 'Optimus 4X HD',
41-
screen: 4.7,
42-
resolution: 720,
43-
storage: [16]
44-
},
45-
{
46-
maker: 'HTC',
47-
model: 'Butterfly',
48-
screen: 5,
49-
resolution: 1080,
50-
storage: [16]
51-
},
52-
{
53-
maker: 'Motorola',
54-
model: 'Moto X',
55-
screen: 4.7,
56-
resolution: 720,
57-
storage: [16, 32]
58-
},
3+
{
4+
maker: 'HTC',
5+
model: 'One S',
6+
screen: 4.3,
7+
resolution: 540,
8+
storage: [8, 16]
9+
},
10+
{
11+
maker: 'Samsung',
12+
model: 'Galaxy S4',
13+
screen: 5,
14+
resolution: 1080,
15+
storage: [16, 32, 64]
16+
},
17+
{
18+
maker: 'HTC',
19+
model: 'One',
20+
screen: 4.7,
21+
resolution: 1080,
22+
storage: [32, 64]
23+
},
24+
{
25+
maker: 'Motorola',
26+
model: 'Droid 4',
27+
screen: 4,
28+
resolution: 540,
29+
storage: [8]
30+
},
31+
{
32+
maker: 'Motorola',
33+
model: 'Droid RAZR HD',
34+
screen: 4.7,
35+
resolution: 720,
36+
storage: [16]
37+
},
38+
{
39+
maker: 'LG',
40+
model: 'Optimus 4X HD',
41+
screen: 4.7,
42+
resolution: 720,
43+
storage: [16]
44+
},
45+
{
46+
maker: 'HTC',
47+
model: 'Butterfly',
48+
screen: 5,
49+
resolution: 1080,
50+
storage: [16]
51+
},
52+
{
53+
maker: 'Motorola',
54+
model: 'Moto X',
55+
screen: 4.7,
56+
resolution: 720,
57+
storage: [16, 32]
58+
}
5959
];
6060

61+
function arrayIntersect(a, b) {
62+
return $.grep(a, function(i) {
63+
return $.inArray(i, b) > -1;
64+
});
65+
}
66+
67+
function arrayToInt(array) {
68+
var output = [];
69+
70+
for(var i=0;i<array.length;i++) {
71+
if(array[i] && !isNaN(+array[i])) output.push(+array[i]);
72+
}
73+
74+
return output;
75+
}
76+
77+
function arrayToFloat(array) {
78+
var output = [];
79+
80+
for(var i=0;i<array.length;i++) {
81+
if(array[i] && !isNaN(parseFloat(array[i]))) output.push(parseFloat(array[i]));
82+
}
83+
84+
return output;
85+
}
86+
6187
function getPhones(screen, resolution, storage) {
88+
var _screen = arrayToFloat([].concat(screen)),
89+
_resolution = arrayToInt([].concat(resolution)),
90+
_storage = arrayToInt([].concat(storage));
91+
6292
return $.grep(phoneList, function(item, index) {
6393
var s = true, r = true, st = true;
6494

65-
if(screen) {
66-
s = item.screen == screen;
95+
if(_screen.length) {
96+
s = $.inArray(item.screen, _screen) > -1;
6797
}
6898

69-
if(resolution) {
70-
r = item.resolution == resolution;
99+
if(_resolution.length) {
100+
r = $.inArray(item.resolution, _resolution) > -1;
71101
}
72102

73-
if(storage) {
74-
st = item.storage.indexOf(storage) > -1;
103+
if(_storage.length) {
104+
st = arrayIntersect(item.storage, _storage).length > 0;
75105
}
76106

77107
return !!(s && r && st);
@@ -126,7 +156,7 @@ $.mockjax({
126156
contentType: 'application/json; charset=utf-8',
127157
responseTime: 1000,
128158
response: function(settings){
129-
this.responseText = JSON.stringify(getScreens(parseFloat(settings.data.resolution), parseFloat(settings.data.storage)));
159+
this.responseText = JSON.stringify(getScreens(settings.data.resolution, settings.data.storage));
130160
}
131161
});
132162

@@ -135,7 +165,7 @@ $.mockjax({
135165
contentType: 'application/json; charset=utf-8',
136166
responseTime: 1000,
137167
response: function(settings){
138-
this.responseText = JSON.stringify(getResolutions(parseFloat(settings.data.screen), parseFloat(settings.data.storage)));
168+
this.responseText = JSON.stringify(getResolutions(settings.data.screen, settings.data.storage));
139169
}
140170
});
141171

@@ -144,7 +174,7 @@ $.mockjax({
144174
contentType: 'application/json; charset=utf-8',
145175
responseTime: 1000,
146176
response: function(settings){
147-
this.responseText = JSON.stringify(getStorages(parseFloat(settings.data.screen), parseFloat(settings.data.resolution)));
177+
this.responseText = JSON.stringify(getStorages(settings.data.screen, settings.data.resolution));
148178
}
149179
});
150180

@@ -153,6 +183,6 @@ $.mockjax({
153183
contentType: 'application/json; charset=utf-8',
154184
responseTime: 1000,
155185
response: function(settings){
156-
this.responseText = JSON.stringify(getPhones(parseFloat(settings.data.screen), parseFloat(settings.data.resolution), parseFloat(settings.data.storage)));
186+
this.responseText = JSON.stringify(getPhones(settings.data.screen, settings.data.resolution, settings.data.storage));
157187
}
158188
});

‎demo.html‎

Lines changed: 85 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,35 @@ <h6>Code</h6>
273273

274274
<br />
275275

276+
<h4>Multiple select</h4>
277+
<p>You can enable multiple select by including the <code>multiple</code> attribute. The value for the dropdown will then be an array of strings instead of a string. However, you will need to ensure that your backend service supports this type of data.</p>
278+
279+
<div id="example4" class="bs-docs-example">
280+
<h4>Phone finder</h4>
281+
282+
<select class="step1" name="screen" multiple="multiple">
283+
<option value="4" selected="selected">4.0"</option>
284+
<option value="4.3">4.3"</option>
285+
<option value="4.7">4.7"</option>
286+
<option value="5">5.0"</option>
287+
</select>
288+
<select class="step2" name="resolution" multiple="multiple">
289+
</select>
290+
<select class="step3" name="storage" multiple="multiple">
291+
</select>
292+
293+
<h4>Matches <img src="ajax-loader.gif" data-bind="visible: loading" /></h4>
294+
<ul data-bind="foreach: phones, visible: phones().length > 0">
295+
<li>
296+
<span data-bind="text: maker"></span>
297+
<span data-bind="text: model"></span>
298+
</li>
299+
</ul>
300+
<p data-bind="visible: phones().length == 0">No matches</p>
301+
</div>
302+
303+
<br />
304+
276305
<p class="text-center"><small>Copyright &copy; 2013 <a href="http://dnasir.com">Dzulqarnain Nasir</a></small></p>
277306
</div>
278307

@@ -290,11 +319,13 @@ <h6>Code</h6>
290319

291320
var example1 = new viewmodel(),
292321
example2 = new viewmodel(),
293-
example3 = new viewmodel();
322+
example3 = new viewmodel(),
323+
example4 = new viewmodel();
294324

295325
ko.applyBindings(example1, document.getElementById('example1'));
296326
ko.applyBindings(example2, document.getElementById('example2'));
297327
ko.applyBindings(example3, document.getElementById('example3'));
328+
ko.applyBindings(example4, document.getElementById('example4'));
298329

299330
// Example 1
300331
$('#example1').cascadingDropdown({
@@ -432,6 +463,59 @@ <h6>Code</h6>
432463
});
433464
}
434465
});
466+
467+
// Example 4
468+
$('#example4').cascadingDropdown({
469+
selectBoxes: [
470+
{
471+
selector: '.step1'
472+
},
473+
{
474+
selector: '.step2',
475+
source: function(request, response) {
476+
$.getJSON('/api/resolutions', request, function(data) {
477+
response($.map(data, function(item, index) {
478+
return {
479+
label: item + 'p',
480+
value: item,
481+
selected: index == 0
482+
};
483+
}));
484+
});
485+
}
486+
},
487+
{
488+
selector: '.step3',
489+
requires: ['.step1', '.step2'],
490+
requireAll: true,
491+
source: function(request, response) {
492+
$.getJSON('/api/storages', request, function(data) {
493+
response($.map(data, function(item, index) {
494+
return {
495+
label: item + ' GB',
496+
value: item,
497+
selected: index == 0
498+
};
499+
}));
500+
});
501+
}
502+
}
503+
],
504+
onChange: function(event, dropdownData) {
505+
example4.loading(true);
506+
$.getJSON('/api/phones', dropdownData, function(data) {
507+
example4.phones(data);
508+
example4.loading(false);
509+
});
510+
},
511+
onReady: function(event, dropdownData) {
512+
example4.loading(true);
513+
$.getJSON('/api/phones', dropdownData, function(data) {
514+
example4.phones(data);
515+
example4.loading(false);
516+
});
517+
}
518+
});
435519
</script>
436520
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js"></script>
437521
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.js"></script>

0 commit comments

Comments
 (0)