-
Notifications
You must be signed in to change notification settings - Fork 31
/
Copy pathindex.html
581 lines (580 loc) · 21.1 KB
/
index.html
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
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
<!DOCTYPE html>
<html>
<!-- TODO create more fiddles (empty option, selected property in data) -->
<head>
<title>Simple Combobox Description</title>
<link href="css/jquery.scombobox.css" rel="stylesheet" />
<script src="js/missed.js"></script><!-- add this script for IE8 compatibility -->
<script src="js/latinize.js"></script><!-- add this to use filterIgnoreAccents option (convert Művész to Muvesz) -->
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/jquery.scombobox.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
* {
padding: 0; margin: 0;
}
body {
font-family: 'Arial', sans-serif;
font-size: 90%;
color: #333;
line-height: 20px;
}
input {
font-size: 110%;
}
.main {
padding: 10px 20px;
}
.main > table {
width: 100%;
}
p {
padding: 5px 0 8px 0;
text-indent: 35px;
line-height: 20px;
}
pre {
padding: 5px 0 8px 35px;
line-height: 18px;
}
pre.nopadding {
padding: 0;
}
td.result {
width: 50%;
vertical-align: top;
}
table {
border-collapse: collapse;
}
.docs { margin-top: 10px }
.docs td {
vertical-align: top;
}
.docs th, .docs td {
padding: 5px;
border: 1px solid #CCC;
}
.docs th {
text-align: center;
background: #F8F8F8;
font-weight: normal;
padding-top: 10px;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div class="main">
<p>See examples <a href="http://jsfiddle.net/user/ivkremer/fiddles/" targer="_blank">here</a>.</p>
<div>
<select id="combo-01">
<option value="01">val 01</option>
<option value="02">val 02</option>
<option value="03">Gyűszűvirág 03</option>
<option value="04">val 04</option>
<option value="05">Művész Mozi 05</option>
<option value="06">хуёвый 06</option>
<option value="07">val 07</optiosn>
<option value="08">Cajicá 08</option>
<option value="09">val 09</option>
<option value="10">val 10</option>
<option value="11">val 11</option>
<option value="12">val 12</option>
<option value="13">val 13</option>
<option value="14">val 14</option>
<option value="15">val 15</option>
<option value="16">val 12</option>
<option value="17">val 17</option>
<option value="18">val 18</option>
<option value="19">val 19</option>
<option value="20">val 20</option>
<option value="21">val 21</option>
<option value="22">val 22</option>
<option value="23">val 23</option>
<option value="24">val 24</option>
<option value="25">val 25</option>
<option value="26">val 26</option>
<option value="27">val 27</option>
<option value="28">val 28</option>
<option value="29">val 29</option>
<option value="30">val 30</option>
<option value="31">val 31</option>
<option value="32">val 32</option>
<option value="33">val 33</option>
<option value="34">val 34</option>
<option value="35">val 35</option>
<option value="36">val 36</option>
<option value="37">val 37</option>
<option value="38">val 38</option>
<option value="39">val 39</option>
<option value="40">val 40</option>
<option value="41">val 41</option>
<option value="42">val 42</option>
<option value="43">val 43</option>
<option value="44">val 44</option>
<option value="45">val 45</option>
<option value="46">val 46</option>
<option value="47">val 47</option>
<option value="48">val 48</option>
</select>
<select id="combo-02"></select>
<script>
$().scombobox.extendDefaults({
filterIgnoreAccents: true,
highlight: true
});
$(function() {
$('#combo-01').scombobox({filterDelay: 300, placeholder: 'Lol'});
$('#combo-02').scombobox({
data: [{
value: '001', text: 'val 001'
}, {
value: '002', text: 'val 002', selected: true
}, {
separator: true, text: 'val 003'
}, {
value: '003', text: 'val 003'
}]
});
});
</script>
</div>
<table class="docs">
<thead>
<tr>
<th colspan="4" style="background: #FCFCFC; letter-spacing: 5px">Options</th>
</tr>
<tr>
<th style="width: 8%">Property</th>
<th style="width: 15%">Type</th>
<th>Description</th>
<th style="width: 13%">Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>Array, Object, String</td>
<td>
The data for filling combobox items. The original select is used for retrieving data if no data param was given.
The data my be an array or an object with enumerated properties that is <code>{0: {...}, 1: {...}}</code>. Also data can be
supplied as JSON string. Each item in data except headers and separators (elements having <code>separator</code> property)
must contain value property, which is an equivalent of <code>option</code> tag value in select. The text of an item should
be stored in <code>text</code> property. If the item has a <code>separator</code> property then it appears as a separator
in the list. If it also has a <code>header</code> (a string supposed) property then it appears as a header in the list.
Be sure a header item has a text anyway if you use data sorting to control its position because sorting depends on text.
To use data option in a more flexible way see <code>pMarkup</code> and <code>pFillFunc</code> options.
</td>
<td><code>null</code></td>
</tr>
<tr>
<td>empty</td>
<td>Boolean</td>
<td>Whether combobox is empty by default (true) or has an original select value (usually it the first value,
but can be changed by added a <code>selected</code> prop).</td>
<td><code>false</code></td>
</tr>
<tr>
<td>disabled</td>
<td>Boolean</td>
<td>Whether to set a visible text input disabled or not.</td>
<td><code>false</code></td>
</tr>
<tr>
<td>sort</td>
<td>Boolean</td>
<td>Whether to sort data. Sorting depends on text.</td>
<td><code>true</code></td>
</tr>
<tr>
<td>sortAsc</td>
<td>Boolean</td>
<td>Whether to sort ascending (true) or descending (false).</td>
<td><code>true</code></td>
</tr>
<tr>
<td>removeDuplicates</td>
<td>Boolean</td>
<td>Whether to remove duplicates from given date. Duplicates are considered as elements with the same <code>value</code> properties.</td>
<td><code>true</code></td>
</tr>
<tr>
<td>fullMatch</td>
<td>Boolean</td>
<td>Whether to filter the items not only from the beginning of the line. Anyhow, the filtering is applied only in text stored inside of
<code><span class="scombobox-mainspan"></span></code> element. See also <code>pMarkup</code> and <code>pFillFunc</code></td>
<td><code>false</code></td>
</tr>
<tr>
<td>highlight</td>
<td>Boolean, null</td>
<td>Whether to highlight matches in items while filtering. By default highlighting is enabled if <code>fullMatch</code> is enabled
(<code>highlight</code> is set to null by default). To use <code>fullMatch</code> without highlighting set <code>highlight</code> option
strictly to <code>false</code>. To turn on highlighting anyway set it to <code>true</code>.</td>
<td><code>null</code></td>
</tr>
<tr>
<td>filterIgnoreCase</td>
<td>Boolean</td>
<td>Whether to search ignoring case.</td>
<td><code>true</code></td>
</tr>
<tr>
<td>filterIgnoreAccents</td>
<td>Boolean</td>
<td>Whether to convert a needle and a haystack like 'Cajicá' or 'Hősök' to 'Cajica' and 'Hosok'.</td>
<td><code>false</code></td>
</tr>
<tr>
<td>filterDelay</td>
<td>Number</td>
<td>Whether to debounce search function, falsy value for no debounce.</td>
<td><code>0</code></td>
</tr>
<tr>
<td>hideSeparatorsOnSearch</td>
<td>Boolean</td>
<td>Whether to exclude separators from the match list that appears when typing into the filter input.</td>
<td><code>false</code></td>
</tr>
<tr>
<td>expandOnFocus</td>
<td>Boolean</td>
<td>Whether to expand combobox on focus in filter input. Applies on an empty combobox.</td>
<td><code>true</code></td>
</tr>
<tr>
<td>expandOnFocusWithValue</td>
<td>Boolean</td>
<td>Whether to expand combobox on focus in filter input. Applies on a filled combobox.</td>
<td><code>true</code></td>
</tr>
<tr>
<td>wrap</td>
<td>Boolean</td>
<td>Whether to use word wrap in items.</td>
<td><code>true</code></td>
</tr>
<tr>
<td>fillOnArrowPress</td>
<td>Boolean</td>
<td>Whether to change the text in filter input while walking up and down by arrows. If this option is turned off than text changes only
on blur (if <code>fillOnBlur</code> is on).</td>
<td><code>true</code></td>
</tr>
<tr>
<td>fillOnBlur</td>
<td>Boolean</td>
<td>Whether to change combobox value on blur. In this case the current selected item will be used. This feature works when using arrow keys.</td>
<td><code>false</code></td>
</tr>
<tr>
<td>blurOnEscape</td>
<td>Boolean</td>
<td>Whether to leave the search input focus on escape keypress or not.</td>
<td><code>false</code></td>
</tr>
<tr>
<td>fillOnTab</td>
<td>Boolean</td>
<td>Whether to set the first visible item as a value on tab key press.
If set to false then the default action is working (going to the next input on page).</td>
<td><code>true</code></td>
</tr>
<tr>
<td>showDropDown</td>
<td>Boolean</td>
<td>Whether to display an arrow button in the right corner of a combobox.</td>
<td><code>true</code></td>
</tr>
<tr>
<td>forbidInvalid</td>
<td>Boolean</td>
<td>Whether to forbid leaving invalid value in combobox on blur. In case this feature is disabled combobox is highlighted on blur
(<code>scombobox-invalid</code> css-class). Other way, the filter text field becomes empty and the combobox value is unset.
</td>
<td><code>false</code></td>
</tr>
<tr>
<td>invalidAsValue</td>
<td>Boolean</td>
<td>When true, then value from visible input will be a value of the combobox (returned by <code>$(combo).scombobox('val')</code>).
</td>
<td><code>false</code></td>
</tr>
<tr>
<td>highlightInvalid</td>
<td>Boolean, null</td>
<td>When true, the combobox is marked with red (<code>.scombobox-invalid</code> CSS class) when there is an invalid value.
If <code>invalidAsValue</code> is set to <code>true</code> then <code>highlightInvalid</code> is considered <code>false</code> by default.
If you want to enabled or disable it regardless to <code>invalidAsValue</code> set it to a any truthy value or not <code>null</code>
falsy value correspondingly.
</td>
<td><code>false</code></td>
</tr>
<tr>
<td>maxHeight</td>
<td>String</td>
<td>Sets the items list div max height (css property).</td>
<td><code>''</code></td>
</tr>
<tr>
<td>tabindex</td>
<td>Number, null</td>
<td>This field sets tabindex for current combobox or set of comboboxes. If set to null, tabindex is removed.</td>
<td><code>null</code></td>
</tr>
<tr>
<td>placeholder</td>
<td>String</td>
<td>This field sets placeholder html attribute for search input.</td>
<td><code>null</code></td>
</tr>
<tr>
<td>reassignId</td>
<td>Boolean</td>
<td>Whether to reattach the <code>id</code> from original select to created combobox.</td>
<td><code>true</code></td>
</tr>
<tr>
<td>mode</td>
<td>String</td>
<td>Whether to use <code>'default'</code> or <code>'checkboxes'</code> mode of combobox. <code>'default'</code> mode is a regular select with a search
field. <code>'checkboxes'</code> is a mode when you can select multiple items by clicking checkboxes in it. In this mode you don't have a text field
for search and the value of combobox is an array of strings – selected values, not the single string.</td>
<td><code>'default'</code></td>
</tr>
<tr>
<td>pMarkup</td>
<td>String</td>
<td>The paragraph markup. Each item in a list is a paragraph tag. You can provide your own properties
and use it your own way in <code>pFullFunc</code>. You can use boolean <code>selected</code> property to
define whether this option is selected by default. In case of single-value combo the last selected
option value will be used.</td>
<td><code>'<img src="${imgsrc}" /><span class="scombobox-mainspan">${text}</span> <span>${additional}</span>'</code></td>
</tr>
<tr>
<td>pFillFunc</td>
<td>Function</td>
<td>Function which fills the items using provided data and <code>pMarkup</code> option.</td>
<td><pre class="nopadding">function(item, options) {
var $p = $('<p />').html(options.pMarkup
.replace('${text}', item.text)
.replace('${additional}', item.additional ? item.additional : '')
.replace('${imgsrc}', item.imgsrc || '')
);
if (typeof item.imgsrc != 'string') {
$p.find('img').hide();
}
return $p;
}</pre></td>
</tr>
<tr>
<td>autoLoad</td>
<td>Function</td>
<td>This option is for ajax loading (appending/prepending items). The usage is following:
<pre class="nopadding">function(value, direction) {
// value here is the edge value in the list (last for appending or first for prepending).
// direction here is the scrolling direction, which can be either 'top' or 'bottom'
// so you can do something like this:
var $t = this;
$.post('your url here' + (direction == 'top' ? '?prepend' : ''), {id: value}, function(res) {
$t.scombobox('fill', res, direction == 'top' ? 2 : 1); // 1 for prepending, 2 for appending
$t.data('pending', false); // this line is compulsory
}, 'json');
}</pre>
</td>
<td><code>$.noop</code></td>
</tr>
<tr>
<td>animation</td>
<td>Object</td>
<td>Animation options (combobox opening/closing).</td>
<td><code>{ duration: 'fast', easing: 'swing' }</code></td>
</tr>
<tr>
<td>listMaxWidth</td>
<td>Number</td>
<td>Limits the list with paragraphs width.</td>
<td><code>window.screen.width / 2</code></td>
</tr>
<tr>
<td>callback</td>
<td>Object</td>
<td><code>callback.func</code> executes with arguments <code>callback.args</code>
after every combobox initialization finished. If the target set
contains multiple comboboxes, than callback executes each time. <code>this</code> refers
to the main combobox div (class <code>scombobox</code>).</td>
<td><pre class="nopadding">{
func: $.noop, // this refers to combobox's div holder
args: [] // arguments
}</pre>
</td>
</tr>
<tr>
<td>beforeOpen</td>
<td>Function</td>
<td>This event fires just before div with options slides down.
<code>this</code> refers to <code><div class="scombobox"></div></code>
</td>
<td><code>$.noop</code></td>
</tr>
<tr>
<td>beforeClose</td>
<td>Function</td>
<td>This event fires just before div with options slides up.
<code>this</code> refers to <code><div class="scombobox"></div></code>
</td>
<td><code>$.noop</code></td>
</tr>
<tr>
<td>afterOpen</td>
<td>Function</td>
<td>This event fires just after div with options slides down.
<code>this</code> refers to <code><div class="scombobox"></div></code>
</td>
<td><code>$.noop</code></td>
</tr>
<tr>
<td>afterClose</td>
<td>Function</td>
<td>This event fires just after div with options slides up.
<code>this</code> refers to <code><div class="scombobox"></div></code>
</td>
<td><code>$.noop</code></td>
</tr>
</tbody>
<thead>
<tr>
<th colspan="4" style="background: #FCFCFC; letter-spacing: 5px">Methods</th>
</tr>
<tr>
<th>Title</th>
<th>Arguments</th>
<th>Description</th>
<th>Returns</th>
</tr>
</thead>
<tbody>
<tr>
<td>fill</td>
<td>data {Array|Object|String|undefined} data, appendMode {Number} flag</td>
<td>Sets the combobox data. The data may be represented in the same way as <code>data</code> option.
Use <code>appendMode</code> option to append or prepend items instead of overwriting all existing ones.
When using this argument <code>1</code> stands for appending and <code>2</code> for prepending.
Despite of having <code>options</code> method described below, this method is useful because
after using <code>options</code> method the data will be merged what may be undesired.
</td>
<td><code>jQuery instance</code> | <code>combobox data</code></td>
</tr>
<tr>
<td>clear</td>
<td></td>
<td>Empties the combobox. You can still use <code>fill</code> method to get the combobox items back.</td>
<td><code>jQuery instance</code></td>
</tr>
<tr>
<td>disabled</td>
<td>b {Boolean|undefined} flag</td>
<td><code>disabled</code> property getter and setter.</td>
<td><code>disabled</code> status<code> | jQuery instance</code></td>
</tr>
<tr>
<td>placeholder</td>
<td>{String|undefined} text</td>
<td><code>placeholder</code> property getter and setter.</td>
<td><code>placeholder</code> text<code> | jQuery instance</code></td>
</tr>
<tr>
<td>options</td>
<td>options {Object|undefined}</td>
<td>Instance options getter and setter.</td>
<td>instance options<code> | jQuery instance</code></td>
</tr>
<tr>
<td>val</td>
<td>value {String|Array}</td>
<td>Combobox value getter and setter. For <code>'default'</code> mode use string, for <code>'checkboxes'</code> use array of strings.</td>
<td>Combobox value<code> | jQuery instance</code></td>
</tr>
<tr>
<td>open</td>
<td></td>
<td>Drops the list down.</td>
<td><code>jQuery instance</code></td>
</tr>
<tr>
<td>close</td>
<td></td>
<td>Closes the list up.</td>
<td><code>jQuery instance</code></td>
</tr>
<tr>
<td>toSelect</td>
<td></td>
<td>Destroys the combobox, keeping only an original select. Returns a jQuery object with a select.</td>
<td><code>jQuery instance</code></td>
</tr>
<tr>
<td colspan="4">Here are methods which help with working with listeners. To add a listener, use
<code>$(combobox).scombobox('listener', function(){})</code> syntax. <code>this</code> will refer to different elements depending on event type.
To trigger an event use <code>$(combobox).scombobox('listener')</code> syntax; to trigger event with a certain namespace, use
<code>$(combobox).scombobox('listener', 'namespace')</code> syntax.</td>
</tr>
<tr>
<th>Event type</th>
<th>this</th>
<th colspan="2">Description</th>
</tr>
<tr>
<td>change</td>
<td>select</td>
<td colspan="2">On select change (hidden element).</td>
</tr>
<tr>
<td>focus</td>
<td><input class="scombobox-display" /></td>
<td colspan="2">On filter input focus. This event does not matter when using 'checkboxes' mode, because this combobox does not have such text field.td>
</tr>
<tr>
<td>blur</td>
<td><input class="scombobox-display" /></td>
<td colspan="2">On filter input blur. This event does not matter when using 'checkboxes' mode, because this combobox does not have such text field.</td>
</tr>
<tr>
<td>keyup</td>
<td><input class="scombobox-display" /></td>
<td colspan="2">On filter input keyup. This event does not matter when using 'checkboxes' mode, because this combobox does not have such text field.</td>
</tr>
<tr>
<td>keydown</td>
<td><input class="scombobox-display" /></td>
<td colspan="2">On filter input keydown. This event does not matter when using 'checkboxes' mode, because this combobox does not have such text field.</td>
</tr>
<tr>
<td>keypress</td>
<td><input class="scombobox-display" /></td>
<td colspan="2">On filter input keypress. This event does not matter when using 'checkboxes' mode, because this combobox does not have such text field.</td>
</tr>
<tr>
<td>click</td>
<td><input class="scombobox-display" /></td>
<td colspan="2">On filter input click. This event does not matter when using 'checkboxes' mode, because this combobox does not have such text field.</td>
</tr>
<tr>
<td>mousedown</td>
<td><input class="scombobox-display" /></td>
<td colspan="2">On filter input mousedown. This event does not matter when using 'checkboxes' mode, because this combobox does not have such text field.</td>
</tr>
<tr>
<td>clickDropdown</td>
<td><div class="scombobox-list" /></td>
<td colspan="2">This event is a click on the dropdown button located in the right corner of a combobox.</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>