Line 0
Link Here
|
|
|
1 |
/** |
2 |
* @author zhixin wen <wenzhixin2010@gmail.com> |
3 |
* @version 1.1.0 |
4 |
* |
5 |
* http://wenzhixin.net.cn/p/multiple-select/ |
6 |
*/ |
7 |
|
8 |
(function ($) { |
9 |
|
10 |
'use strict'; |
11 |
|
12 |
function MultipleSelect($el, options) { |
13 |
var that = this, |
14 |
name = $el.attr('name') || options.name || '' |
15 |
|
16 |
$el.parent().hide(); |
17 |
var elWidth = $el.css("width"); |
18 |
$el.parent().show(); |
19 |
if (elWidth=="0px") {elWidth = $el.outerWidth()+20} |
20 |
|
21 |
this.$el = $el.hide(); |
22 |
this.options = options; |
23 |
this.$parent = $('<div' + $.map(['class', 'title'],function (att) { |
24 |
var attValue = that.$el.attr(att) || ''; |
25 |
attValue = (att === 'class' ? ('ms-parent' + (attValue ? ' ' : '')) : '') + attValue; |
26 |
return attValue ? (' ' + att + '="' + attValue + '"') : ''; |
27 |
}).join('') + ' />'); |
28 |
this.$choice = $('<button type="button" class="ms-choice"><span class="placeholder">' + |
29 |
options.placeholder + '</span><div></div></button>'); |
30 |
this.$drop = $('<div class="ms-drop ' + options.position + '"></div>'); |
31 |
this.$el.after(this.$parent); |
32 |
this.$parent.append(this.$choice); |
33 |
this.$parent.append(this.$drop); |
34 |
|
35 |
if (this.$el.prop('disabled')) { |
36 |
this.$choice.addClass('disabled'); |
37 |
} |
38 |
this.$parent.css('width', options.width || elWidth); |
39 |
|
40 |
if (!this.options.keepOpen) { |
41 |
$('body').click(function (e) { |
42 |
if ($(e.target)[0] === that.$choice[0] || |
43 |
$(e.target).parents('.ms-choice')[0] === that.$choice[0]) { |
44 |
return; |
45 |
} |
46 |
if (($(e.target)[0] === that.$drop[0] || |
47 |
$(e.target).parents('.ms-drop')[0] !== that.$drop[0]) && |
48 |
that.options.isOpen) { |
49 |
that.close(); |
50 |
} |
51 |
}); |
52 |
} |
53 |
|
54 |
this.selectAllName = 'name="selectAll' + name + '"'; |
55 |
this.selectGroupName = 'name="selectGroup' + name + '"'; |
56 |
this.selectItemName = 'name="selectItem' + name + '"'; |
57 |
} |
58 |
|
59 |
MultipleSelect.prototype = { |
60 |
constructor: MultipleSelect, |
61 |
|
62 |
init: function () { |
63 |
var that = this, |
64 |
html = []; |
65 |
if (this.options.filter) { |
66 |
html.push( |
67 |
'<div class="ms-search">', |
68 |
'<input type="text" autocomplete="off" autocorrect="off" autocapitilize="off" spellcheck="false">', |
69 |
'</div>' |
70 |
); |
71 |
} |
72 |
html.push('<ul>'); |
73 |
if (this.options.selectAll && !this.options.single) { |
74 |
html.push( |
75 |
'<li class="ms-select-all">', |
76 |
'<label>', |
77 |
'<input type="checkbox" ' + this.selectAllName + ' /> ', |
78 |
this.options.selectAllDelimiter[0] + this.options.selectAllText + this.options.selectAllDelimiter[1], |
79 |
'</label>', |
80 |
'</li>' |
81 |
); |
82 |
} |
83 |
$.each(this.$el.children(), function (i, elm) { |
84 |
html.push(that.optionToHtml(i, elm)); |
85 |
}); |
86 |
html.push('<li class="ms-no-results">' + this.options.noMatchesFound + '</li>'); |
87 |
html.push('</ul>'); |
88 |
this.$drop.html(html.join('')); |
89 |
|
90 |
this.$drop.find('ul').css('max-height', this.options.maxHeight + 'px'); |
91 |
this.$drop.find('.multiple').css('width', this.options.multipleWidth + 'px'); |
92 |
|
93 |
this.$searchInput = this.$drop.find('.ms-search input'); |
94 |
this.$selectAll = this.$drop.find('input[' + this.selectAllName + ']'); |
95 |
this.$selectGroups = this.$drop.find('input[' + this.selectGroupName + ']'); |
96 |
this.$selectItems = this.$drop.find('input[' + this.selectItemName + ']:enabled'); |
97 |
this.$disableItems = this.$drop.find('input[' + this.selectItemName + ']:disabled'); |
98 |
this.$noResults = this.$drop.find('.ms-no-results'); |
99 |
this.events(); |
100 |
this.updateSelectAll(true); |
101 |
this.update(true); |
102 |
|
103 |
if (this.options.isOpen) { |
104 |
this.open(); |
105 |
} |
106 |
}, |
107 |
|
108 |
optionToHtml: function (i, elm, group, groupDisabled) { |
109 |
var that = this, |
110 |
$elm = $(elm), |
111 |
html = [], |
112 |
multiple = this.options.multiple, |
113 |
optAttributesToCopy = ['class', 'title'], |
114 |
clss = $.map(optAttributesToCopy, function (att, i) { |
115 |
var isMultiple = att === 'class' && multiple; |
116 |
var attValue = $elm.attr(att) || ''; |
117 |
return (isMultiple || attValue) ? |
118 |
(' ' + att + '="' + (isMultiple ? ('multiple' + (attValue ? ' ' : '')) : '') + attValue + '"') : |
119 |
''; |
120 |
}).join(''), |
121 |
disabled, |
122 |
type = this.options.single ? 'radio' : 'checkbox'; |
123 |
|
124 |
if ($elm.is('option')) { |
125 |
var value = $elm.val(), |
126 |
text = that.options.textTemplate($elm), |
127 |
selected = (that.$el.attr('multiple') != undefined) ? $elm.prop('selected') : ($elm.attr('selected') == 'selected'), |
128 |
style = this.options.styler(value) ? ' style="' + this.options.styler(value) + '"' : ''; |
129 |
|
130 |
disabled = groupDisabled || $elm.prop('disabled'); |
131 |
if ((this.options.blockSeparator > "") && (this.options.blockSeparator == $elm.val())) { |
132 |
html.push( |
133 |
'<li' + clss + style + '>', |
134 |
'<label class="' + this.options.blockSeparator + (disabled ? 'disabled' : '') + '">', |
135 |
text, |
136 |
'</label>', |
137 |
'</li>' |
138 |
); |
139 |
} else { |
140 |
html.push( |
141 |
'<li' + clss + style + '>', |
142 |
'<label' + (disabled ? ' class="disabled"' : '') + '>', |
143 |
'<input type="' + type + '" ' + this.selectItemName + ' value="' + value + '"' + |
144 |
(selected ? ' checked="checked"' : '') + |
145 |
(disabled ? ' disabled="disabled"' : '') + |
146 |
(group ? ' data-group="' + group + '"' : '') + |
147 |
'/> ', |
148 |
text, |
149 |
'</label>', |
150 |
'</li>' |
151 |
); |
152 |
} |
153 |
} else if (!group && $elm.is('optgroup')) { |
154 |
var _group = 'group_' + i, |
155 |
label = $elm.attr('label'); |
156 |
|
157 |
disabled = $elm.prop('disabled'); |
158 |
html.push( |
159 |
'<li class="group">', |
160 |
'<label class="optgroup' + (disabled ? ' disabled' : '') + '" data-group="' + _group + '">', |
161 |
(this.options.hideOptgroupCheckboxes ? '' : '<input type="checkbox" ' + this.selectGroupName + |
162 |
(disabled ? ' disabled="disabled"' : '') + ' /> '), |
163 |
label, |
164 |
'</label>', |
165 |
'</li>'); |
166 |
$.each($elm.children(), function (i, elm) { |
167 |
html.push(that.optionToHtml(i, elm, _group, disabled)); |
168 |
}); |
169 |
} |
170 |
return html.join(''); |
171 |
}, |
172 |
|
173 |
events: function () { |
174 |
var that = this; |
175 |
|
176 |
function toggleOpen(e) { |
177 |
e.preventDefault(); |
178 |
that[that.options.isOpen ? 'close' : 'open'](); |
179 |
} |
180 |
|
181 |
var label = this.$el.parent().closest('label')[0] || $('label[for=' + this.$el.attr('id') + ']')[0]; |
182 |
if (label) { |
183 |
$(label).off('click').on('click', function (e) { |
184 |
if (e.target.nodeName.toLowerCase() !== 'label' || e.target !== this) { |
185 |
return; |
186 |
} |
187 |
toggleOpen(e); |
188 |
if (!that.options.filter || !that.options.isOpen) { |
189 |
that.focus(); |
190 |
} |
191 |
e.stopPropagation(); // Causes lost focus otherwise |
192 |
}); |
193 |
} |
194 |
this.$choice.off('click').on('click', toggleOpen) |
195 |
.off('focus').on('focus', this.options.onFocus) |
196 |
.off('blur').on('blur', this.options.onBlur); |
197 |
|
198 |
this.$parent.off('keydown').on('keydown', function (e) { |
199 |
switch (e.which) { |
200 |
case 27: // esc key |
201 |
that.close(); |
202 |
that.$choice.focus(); |
203 |
break; |
204 |
} |
205 |
}); |
206 |
this.$searchInput.off('keydown').on('keydown',function (e) { |
207 |
if (e.keyCode === 9 && e.shiftKey) { // Ensure shift-tab causes lost focus from filter as with clicking away |
208 |
that.close(); |
209 |
} |
210 |
}).off('keyup').on('keyup', function (e) { |
211 |
if (that.options.filterAcceptOnEnter && |
212 |
(e.which === 13 || e.which == 32) && // enter or space |
213 |
that.$searchInput.val() // Avoid selecting/deselecting if no choices made |
214 |
) { |
215 |
that.$selectAll.click(); |
216 |
that.close(); |
217 |
that.focus(); |
218 |
return; |
219 |
} |
220 |
that.filter(); |
221 |
}); |
222 |
this.$selectAll.off('click').on('click', function () { |
223 |
var checked = $(this).prop('checked'), |
224 |
$items = that.$selectItems.filter(':visible'); |
225 |
if ($items.length === that.$selectItems.length) { |
226 |
that[checked ? 'checkAll' : 'uncheckAll'](); |
227 |
} else { // when the filter option is true |
228 |
that.$selectGroups.prop('checked', checked); |
229 |
$items.prop('checked', checked); |
230 |
that.options[checked ? 'onCheckAll' : 'onUncheckAll'](); |
231 |
that.update(); |
232 |
} |
233 |
}); |
234 |
this.$selectGroups.off('click').on('click', function () { |
235 |
var group = $(this).parent().attr('data-group'), |
236 |
$items = that.$selectItems.filter(':visible'), |
237 |
$children = $items.filter('[data-group="' + group + '"]'), |
238 |
checked = $children.length !== $children.filter(':checked').length; |
239 |
$children.prop('checked', checked); |
240 |
that.updateSelectAll(); |
241 |
that.update(); |
242 |
that.options.onOptgroupClick({ |
243 |
label: $(this).parent().text(), |
244 |
checked: checked, |
245 |
children: $children.get() |
246 |
}); |
247 |
}); |
248 |
this.$selectItems.off('click').on('click', function () { |
249 |
that.updateSelectAll(); |
250 |
that.update(); |
251 |
that.updateOptGroupSelect(); |
252 |
that.options.onClick({ |
253 |
label: $(this).parent().text(), |
254 |
value: $(this).val(), |
255 |
checked: $(this).prop('checked') |
256 |
}); |
257 |
|
258 |
if (that.options.single && that.options.isOpen && !that.options.keepOpen) { |
259 |
that.close(); |
260 |
} |
261 |
}); |
262 |
}, |
263 |
|
264 |
open: function () { |
265 |
if (this.$choice.hasClass('disabled')) { |
266 |
return; |
267 |
} |
268 |
this.options.isOpen = true; |
269 |
this.$choice.find('>div').addClass('open'); |
270 |
this.$drop.show(); |
271 |
|
272 |
// fix filter bug: no results show |
273 |
this.$selectAll.parent().show(); |
274 |
this.$noResults.hide(); |
275 |
|
276 |
// Fix #77: 'All selected' when no options |
277 |
if (this.$el.children().length === 0) { |
278 |
this.$selectAll.parent().hide(); |
279 |
this.$noResults.show(); |
280 |
} |
281 |
|
282 |
if (this.options.container) { |
283 |
var offset = this.$drop.offset(); |
284 |
this.$drop.appendTo($(this.options.container)); |
285 |
this.$drop.offset({ top: offset.top, left: offset.left }); |
286 |
} |
287 |
if (this.options.filter) { |
288 |
this.$searchInput.val(''); |
289 |
this.$searchInput.focus(); |
290 |
this.filter(); |
291 |
} |
292 |
this.options.onOpen(); |
293 |
}, |
294 |
|
295 |
close: function () { |
296 |
this.options.isOpen = false; |
297 |
this.$choice.find('>div').removeClass('open'); |
298 |
this.$drop.hide(); |
299 |
if (this.options.container) { |
300 |
this.$parent.append(this.$drop); |
301 |
this.$drop.css({ |
302 |
'top': 'auto', |
303 |
'left': 'auto' |
304 |
}); |
305 |
} |
306 |
this.options.onClose(); |
307 |
}, |
308 |
|
309 |
update: function (isInit) { |
310 |
var selects = this.getSelects(), |
311 |
$span = this.$choice.find('>span'); |
312 |
|
313 |
if (selects.length === 0) { |
314 |
$span.addClass('placeholder').html(this.options.placeholder); |
315 |
} else if (this.options.countSelected && selects.length < this.options.minumimCountSelected) { |
316 |
$span.removeClass('placeholder').html( |
317 |
(this.options.displayValues ? selects : this.getSelects('text')) |
318 |
.join(this.options.delimiter)); |
319 |
} else if (this.options.allSelected && |
320 |
selects.length === this.$selectItems.length + this.$disableItems.length) { |
321 |
$span.removeClass('placeholder').html(this.options.allSelected); |
322 |
} else if ((this.options.countSelected || this.options.etcaetera) && selects.length > this.options.minumimCountSelected) { |
323 |
if (this.options.etcaetera) { |
324 |
$span.removeClass('placeholder').html((this.options.displayValues ? selects : this.getSelects('text').slice(0, this.options.minumimCountSelected)).join(this.options.delimiter) + '...'); |
325 |
} |
326 |
else { |
327 |
$span.removeClass('placeholder').html(this.options.countSelected |
328 |
.replace('#', selects.length) |
329 |
.replace('%', this.$selectItems.length + this.$disableItems.length)); |
330 |
} |
331 |
} else { |
332 |
$span.removeClass('placeholder').html( |
333 |
(this.options.displayValues ? selects : this.getSelects('text')) |
334 |
.join(this.options.delimiter)); |
335 |
} |
336 |
// set selects to select |
337 |
this.$el.val(this.getSelects()); |
338 |
|
339 |
// add selected class to selected li |
340 |
this.$drop.find('li').removeClass('selected'); |
341 |
this.$drop.find('input[' + this.selectItemName + ']:checked').each(function () { |
342 |
$(this).parents('li').first().addClass('selected'); |
343 |
}); |
344 |
|
345 |
// trigger <select> change event |
346 |
if (!isInit) { |
347 |
this.$el.trigger('change'); |
348 |
} |
349 |
}, |
350 |
|
351 |
updateSelectAll: function (Init) { |
352 |
var $items = this.$selectItems; |
353 |
if (!Init) { $items = $items.filter(':visible'); } |
354 |
this.$selectAll.prop('checked', $items.length && |
355 |
$items.length === $items.filter(':checked').length); |
356 |
if (this.$selectAll.prop('checked')) { |
357 |
this.options.onCheckAll(); |
358 |
} |
359 |
}, |
360 |
|
361 |
updateOptGroupSelect: function () { |
362 |
var $items = this.$selectItems.filter(':visible'); |
363 |
$.each(this.$selectGroups, function (i, val) { |
364 |
var group = $(val).parent().attr('data-group'), |
365 |
$children = $items.filter('[data-group="' + group + '"]'); |
366 |
$(val).prop('checked', $children.length && |
367 |
$children.length === $children.filter(':checked').length); |
368 |
}); |
369 |
}, |
370 |
|
371 |
//value or text, default: 'value' |
372 |
getSelects: function (type) { |
373 |
var that = this, |
374 |
texts = [], |
375 |
values = []; |
376 |
this.$drop.find('input[' + this.selectItemName + ']:checked').each(function () { |
377 |
texts.push($(this).parents('li').first().text()); |
378 |
values.push($(this).val()); |
379 |
}); |
380 |
|
381 |
if (type === 'text' && this.$selectGroups.length) { |
382 |
texts = []; |
383 |
this.$selectGroups.each(function () { |
384 |
var html = [], |
385 |
text = $.trim($(this).parent().text()), |
386 |
group = $(this).parent().data('group'), |
387 |
$children = that.$drop.find('[' + that.selectItemName + '][data-group="' + group + '"]'), |
388 |
$selected = $children.filter(':checked'); |
389 |
|
390 |
if ($selected.length === 0) { |
391 |
return; |
392 |
} |
393 |
|
394 |
html.push('['); |
395 |
html.push(text); |
396 |
if ($children.length > $selected.length) { |
397 |
var list = []; |
398 |
$selected.each(function () { |
399 |
list.push($(this).parent().text()); |
400 |
}); |
401 |
html.push(': ' + list.join(', ')); |
402 |
} |
403 |
html.push(']'); |
404 |
texts.push(html.join('')); |
405 |
}); |
406 |
} |
407 |
return type === 'text' ? texts : values; |
408 |
}, |
409 |
|
410 |
setSelects: function (values) { |
411 |
var that = this; |
412 |
this.$selectItems.prop('checked', false); |
413 |
$.each(values, function (i, value) { |
414 |
that.$selectItems.filter('[value="' + value + '"]').prop('checked', true); |
415 |
}); |
416 |
this.$selectAll.prop('checked', this.$selectItems.length === |
417 |
this.$selectItems.filter(':checked').length); |
418 |
this.update(); |
419 |
}, |
420 |
|
421 |
enable: function () { |
422 |
this.$choice.removeClass('disabled'); |
423 |
}, |
424 |
|
425 |
disable: function () { |
426 |
this.$choice.addClass('disabled'); |
427 |
}, |
428 |
|
429 |
checkAll: function () { |
430 |
this.$selectItems.prop('checked', true); |
431 |
this.$selectGroups.prop('checked', true); |
432 |
this.$selectAll.prop('checked', true); |
433 |
this.update(); |
434 |
this.options.onCheckAll(); |
435 |
}, |
436 |
|
437 |
uncheckAll: function () { |
438 |
this.$selectItems.prop('checked', false); |
439 |
this.$selectGroups.prop('checked', false); |
440 |
this.$selectAll.prop('checked', false); |
441 |
this.update(); |
442 |
this.options.onUncheckAll(); |
443 |
}, |
444 |
|
445 |
focus: function () { |
446 |
this.$choice.focus(); |
447 |
this.options.onFocus(); |
448 |
}, |
449 |
|
450 |
blur: function () { |
451 |
this.$choice.blur(); |
452 |
this.options.onBlur(); |
453 |
}, |
454 |
|
455 |
refresh: function () { |
456 |
this.init(); |
457 |
}, |
458 |
|
459 |
filter: function () { |
460 |
var that = this, |
461 |
text = $.trim(this.$searchInput.val()).toLowerCase(); |
462 |
if (text.length === 0) { |
463 |
this.$selectItems.parent().show(); |
464 |
this.$disableItems.parent().show(); |
465 |
this.$selectGroups.parent().show(); |
466 |
} else { |
467 |
this.$selectItems.each(function () { |
468 |
var $parent = $(this).parent(); |
469 |
$parent[$parent.text().toLowerCase().indexOf(text) < 0 ? 'hide' : 'show'](); |
470 |
}); |
471 |
this.$disableItems.parent().hide(); |
472 |
this.$selectGroups.each(function () { |
473 |
var $parent = $(this).parent(); |
474 |
var group = $parent.attr('data-group'), |
475 |
$items = that.$selectItems.filter(':visible'); |
476 |
$parent[$items.filter('[data-group="' + group + '"]').length === 0 ? 'hide' : 'show'](); |
477 |
}); |
478 |
|
479 |
//Check if no matches found |
480 |
if (this.$selectItems.filter(':visible').length) { |
481 |
this.$selectAll.parent().show(); |
482 |
this.$noResults.hide(); |
483 |
} else { |
484 |
this.$selectAll.parent().hide(); |
485 |
this.$noResults.show(); |
486 |
} |
487 |
} |
488 |
this.updateOptGroupSelect(); |
489 |
this.updateSelectAll(); |
490 |
} |
491 |
}; |
492 |
|
493 |
$.fn.multipleSelect = function () { |
494 |
var option = arguments[0], |
495 |
args = arguments, |
496 |
|
497 |
value, |
498 |
allowedMethods = [ |
499 |
'getSelects', 'setSelects', |
500 |
'enable', 'disable', |
501 |
'checkAll', 'uncheckAll', |
502 |
'focus', 'blur', |
503 |
'refresh' |
504 |
]; |
505 |
|
506 |
this.each(function () { |
507 |
var $this = $(this), |
508 |
data = $this.data('multipleSelect'), |
509 |
options = $.extend({}, $.fn.multipleSelect.defaults, |
510 |
$this.data(), typeof option === 'object' && option); |
511 |
|
512 |
if (!data) { |
513 |
data = new MultipleSelect($this, options); |
514 |
$this.data('multipleSelect', data); |
515 |
} |
516 |
|
517 |
if (typeof option === 'string') { |
518 |
if ($.inArray(option, allowedMethods) < 0) { |
519 |
throw "Unknown method: " + option; |
520 |
} |
521 |
value = data[option](args[1]); |
522 |
} else { |
523 |
data.init(); |
524 |
if (args[1]) { |
525 |
value = data[args[1]].apply(data, [].slice.call(args, 2)); |
526 |
} |
527 |
} |
528 |
}); |
529 |
|
530 |
return value ? value : this; |
531 |
}; |
532 |
|
533 |
$.fn.multipleSelect.defaults = { |
534 |
name: '', |
535 |
isOpen: false, |
536 |
placeholder: '', |
537 |
selectAll: true, |
538 |
selectAllText: 'Select all', |
539 |
selectAllDelimiter: ['[', ']'], |
540 |
allSelected: 'All selected', |
541 |
minumimCountSelected: 3, |
542 |
countSelected: '# of % selected', |
543 |
noMatchesFound: 'No matches found', |
544 |
multiple: false, |
545 |
multipleWidth: 80, |
546 |
single: false, |
547 |
filter: false, |
548 |
width: undefined, |
549 |
maxHeight: 250, |
550 |
container: null, |
551 |
position: 'bottom', |
552 |
keepOpen: false, |
553 |
blockSeparator: '', |
554 |
displayValues: false, |
555 |
delimiter: ', ', |
556 |
|
557 |
styler: function () { |
558 |
return false; |
559 |
}, |
560 |
textTemplate: function ($elm) { |
561 |
return $elm.text(); |
562 |
}, |
563 |
|
564 |
onOpen: function () { |
565 |
return false; |
566 |
}, |
567 |
onClose: function () { |
568 |
return false; |
569 |
}, |
570 |
onCheckAll: function () { |
571 |
return false; |
572 |
}, |
573 |
onUncheckAll: function () { |
574 |
return false; |
575 |
}, |
576 |
onFocus: function () { |
577 |
return false; |
578 |
}, |
579 |
onBlur: function () { |
580 |
return false; |
581 |
}, |
582 |
onOptgroupClick: function () { |
583 |
return false; |
584 |
}, |
585 |
onClick: function () { |
586 |
return false; |
587 |
} |
588 |
}; |
589 |
})(jQuery); |