-
-
Notifications
You must be signed in to change notification settings - Fork 15
Expand file tree
/
Copy pathdemo.html
More file actions
232 lines (213 loc) · 9.97 KB
/
demo.html
File metadata and controls
232 lines (213 loc) · 9.97 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<title>Multi Select JS - Demos</title>
<!-- Include the Multi Select stylesheet -->
<link href="MultiSelect.css" rel="stylesheet" type="text/css">
<style>
* {
box-sizing: border-box;
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 16px;
}
body {
margin: 0;
padding: 20px;
background-color: #f3f4f7;
color: #212529;
}
.container {
display: flex;
flex-direction: column;
margin: 60px auto;
padding: 40px 50px 50px;
max-width: 600px;
width: 100%;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
h1 {
margin: 0 0 5px;
font-size: 28px;
font-weight: 600;
color: #212529;
}
p.description {
color: #65727e;
margin-top: 0;
margin-bottom: 10px;
font-size: 15px;
line-height: 1.5;
}
label {
display: block;
margin: 20px 0 10px;
font-weight: 600;
color: #212529;
padding-bottom: 8px;
}
.hint {
display: block;
font-size: 13px;
color: #888;
margin-top: 5px;
margin-bottom: 5px;
font-weight: normal;
}
.btn {
display: inline-block;
margin-top: 30px;
padding: 14px 20px;
background: #40c979;
color: #fff;
font-weight: bold;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.2s;
width: 100%;
}
.btn:hover { background: #35b068; }
.btn-small {
width: auto;
margin-top: 10px;
font-size: 14px;
padding: 8px 15px;
background: #6c757d;
}
.btn-small:hover { background: #5a6268; }
</style>
</head>
<body>
<form class="container" onsubmit="event.preventDefault(); alert('Success! Form validation passed and data is ready to be submitted.');">
<h1>Multi Select JS</h1>
<p class="description">A lightweight, dependency-free, and highly customizable Vanilla JavaScript library. Check out the interactive demos below.</p>
<!-- DEMO 1: OptGroups -->
<label for="fruits">
1. Standard & OptGroups
<span class="hint">Parses standard HTML <code><optgroup></code> tags. Click a group header to toggle the entire sublist.</span>
</label>
<select id="fruits" name="fruits[]" data-placeholder="Select fruits" multiple data-multi-select>
<optgroup label="Berries">
<option value="Blackberry">Blackberry</option>
<option value="Blueberry">Blueberry</option>
<option value="Raspberry">Raspberry</option>
<option value="Strawberry">Strawberry</option>
</optgroup>
<optgroup label="Citrus">
<option value="Orange">Orange</option>
<option value="Grapefruit">Grapefruit</option>
<option value="Lemon">Lemon</option>
</optgroup>
<optgroup label="Other">
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Mango">Mango</option>
<option value="Watermelon">Watermelon</option>
</optgroup>
</select>
<!-- DEMO 2: Validation & Limits -->
<label for="cars">
2. Limits & Form Validation
<span class="hint">Try to submit the form without selecting a car. Uses <code>required</code>, <code>data-max="3"</code>, and hides the "Select All" button.</span>
</label>
<select id="cars" name="cars[]" data-placeholder="Select up to 3 cars (Required)" required data-max="3" data-select-all="false" multiple data-multi-select>
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
<option value="Honda">Honda</option>
<option value="Toyota">Toyota</option>
</select>
<!-- DEMO 3: Dark Mode -->
<label for="darkmode">
3. Dark Mode Theme
<span class="hint">Easily toggle themes using <code>data-theme="dark"</code> (Accepts: auto, light, dark).</span>
</label>
<select id="darkmode" name="darkmode[]" data-placeholder="Dark mode active..." data-theme="dark" multiple data-multi-select>
<option value="1">Dark Option 1</option>
<option value="2">Dark Option 2</option>
<option value="3">Dark Option 3</option>
</select>
<!-- DEMO 4: Advanced JS Init -->
<label for="dynamic">
4. Advanced JS Initialization
<span class="hint">Initialized entirely via JavaScript. Showcases HTML tag injection, custom callbacks, and auto-close on selection.</span>
</label>
<select id="dynamic" name="dynamic[]" multiple></select>
<!-- DEMO 5: Async Fetch -->
<label for="async">
5. Async Data Fetching
<span class="hint">Natively fetch JSON arrays from remote endpoints.</span>
</label>
<select id="async" name="async[]" multiple></select>
<button id="fetch-btn" type="button" class="btn btn-small">Fetch Remote Data</button>
<!-- Submit Button for Testing Form Validation -->
<button type="submit" class="btn">Test Form Submission</button>
</form>
<!-- Include the Multi Select JS class -->
<script src="MultiSelect.js"></script>
<!-- Initialize Custom JS Demos -->
<script>
// ==========================================
// DEMO 4: Advanced JS Configuration
// ==========================================
const dynamicSelect = new MultiSelect('#dynamic', {
placeholder: 'Select an option',
search: true,
selectAll: false,
listAll: false, // Will show "X selected" instead of rendering tags
closeListOnItemSelect: true, // Auto-closes dropdown on click
data:[
{ value: 'opt1', text: 'Standard Option' },
{ value: 'opt2', html: '<span style="color: #e44e4e; font-weight: bold;">🔴 Option 2 with Custom HTML!</span>' },
{ value: 'opt3', text: 'Pre-Selected Option', selected: true },
{ value: 'opt4', text: 'Option 4' },
{ value: 'opt5', text: 'Option 5' }
],
onChange: function(value, text, element) {
console.log('Change Event:', value, text);
},
onSelect: function(value, text, element) {
console.log('Selected Event:', value);
},
onUnselect: function(value, text, element) {
console.log('Unselected Event:', value);
}
});
// ==========================================
// DEMO 5: Async Fetch Data API
// ==========================================
const asyncSelect = new MultiSelect('#async', {
placeholder: 'Click fetch button to load...',
search: true,
selectAll: true
});
document.getElementById('fetch-btn').addEventListener('click', async (e) => {
const btn = e.target;
btn.textContent = "Loading...";
btn.disabled = true;
// Mock an API Response to keep the demo self-contained
const mockApiData = JSON.stringify([
{ value: 'remote_1', text: 'Cloud User 1', group: 'Fetched Data' },
{ value: 'remote_2', text: 'Cloud User 2', group: 'Fetched Data' },
{ value: 'remote_3', text: 'Cloud User 3', group: 'Fetched Data' },
{ value: 'remote_4', text: 'Cloud User 4', group: 'Fetched Data' }
]);
// Create a blob URL to simulate fetching from a real remote domain
const blob = new Blob([mockApiData], { type: 'application/json' });
const mockApiUrl = URL.createObjectURL(blob);
// Trigger the native fetch function inside your library
await asyncSelect.fetch(mockApiUrl);
btn.textContent = "Data Loaded Successfully!";
btn.style.backgroundColor = "#40c979";
btn.style.color = "#fff";
});
</script>
</body>
</html>