Option 1
Option 2
diff --git a/demos/maxchecked.htm b/demos/maxchecked.htm
index bf4bf89..d325aae 100644
--- a/demos/maxchecked.htm
+++ b/demos/maxchecked.htm
@@ -6,7 +6,7 @@
Single Select
-Setting the multiple parameter to false will force the widget to use radio buttons instead of checkboxes. I advise using the header
-parameter along with multiple in order to hide/change the "check all"/"uncheck all" links.
+Omitting the multiple attribute from the underlying native select force the widget to use radio buttons instead of checkboxes. It is a good idea to use the header
+parameter in order to hide/change the "check all"/"uncheck all" links.
$("select").multiselect({
- multiple: false,
- header: "Select an option",
+ header: "=Select an option",
noneSelectedText: "Select an Option",
selectedList: 1
});
diff --git a/i18n/jquery.multiselect.br.js b/i18n/jquery.multiselect.br.js
index a56d649..a2dda87 100644
--- a/i18n/jquery.multiselect.br.js
+++ b/i18n/jquery.multiselect.br.js
@@ -4,8 +4,10 @@
(function ( $ ) {
$.extend($.ech.multiselect.prototype.options, {
- checkAllText: 'Marcar todos',
- uncheckAllText: 'Desmarcar todos',
+ linkInfo: {
+ checkAll: {text: 'Marcar todos', title: 'Marcar todos'},
+ uncheckAll: {text: 'Desmarcar todos', title: 'Desmarcar todos'}
+ },
noneSelectedText: 'Selecione as opções',
selectedText: '# selecionado'
});
diff --git a/i18n/jquery.multiselect.cs.js b/i18n/jquery.multiselect.cs.js
index d839222..b291635 100644
--- a/i18n/jquery.multiselect.cs.js
+++ b/i18n/jquery.multiselect.cs.js
@@ -4,8 +4,10 @@
(function ( $ ) {
$.extend($.ech.multiselect.prototype.options, {
- checkAllText: 'Vybrat vše',
- uncheckAllText: 'Zrušit výběr',
+ linkInfo: {
+ checkAll: {text: 'Vybrat vše', title: 'Vybrat vše'},
+ uncheckAll: {text: 'Zrušit výběr', title: 'Zrušit výběr'}
+ },
noneSelectedText: 'Nic není vybráno',
selectedText: '# vybráno'
});
diff --git a/i18n/jquery.multiselect.de.js b/i18n/jquery.multiselect.de.js
index 9c5a044..ec1e530 100644
--- a/i18n/jquery.multiselect.de.js
+++ b/i18n/jquery.multiselect.de.js
@@ -4,8 +4,10 @@
(function ( $ ) {
$.extend($.ech.multiselect.prototype.options, {
- checkAllText: 'Alle auswählen',
- uncheckAllText: 'Alle abwählen',
+ linkInfo: {
+ checkAll: {text: 'Alle auswählen', title: 'Alle auswählen'},
+ uncheckAll: {text: 'Alle abwählen', title: 'Alle abwählen'}
+ },
noneSelectedText: 'Nichts ausgewählt',
selectedText: '# ausgewählt'
});
diff --git a/i18n/jquery.multiselect.es.js b/i18n/jquery.multiselect.es.js
index b03cc31..acee7f1 100644
--- a/i18n/jquery.multiselect.es.js
+++ b/i18n/jquery.multiselect.es.js
@@ -4,8 +4,10 @@
(function ( $ ) {
$.extend($.ech.multiselect.prototype.options, {
- checkAllText: 'Marca todas',
- uncheckAllText: 'Desmarque todas',
+ linkInfo: {
+ checkAll: {text: 'Marca todas', title: 'Marca todas'},
+ uncheckAll: {text: 'Desmarque todas', title: 'Desmarque todas'}
+ },
noneSelectedText: 'Seleccione las opciones',
selectedText: '# seleccionado'
});
diff --git a/i18n/jquery.multiselect.fr.js b/i18n/jquery.multiselect.fr.js
index c24be7d..1bcb8d9 100644
--- a/i18n/jquery.multiselect.fr.js
+++ b/i18n/jquery.multiselect.fr.js
@@ -4,8 +4,10 @@
(function ( $ ) {
$.extend($.ech.multiselect.prototype.options, {
- checkAllText: 'Tout cocher',
- uncheckAllText: 'Tout décocher',
+ linkInfo: {
+ checkAll: {text: 'Tout cocher', title: 'Tout cocher'},
+ uncheckAll: {text: 'Tout décocher', title: 'Tout décocher'}
+ },
noneSelectedText: 'Sélectionner les options',
selectedText: '# sélectionnés'
});
diff --git a/i18n/jquery.multiselect.hu.js b/i18n/jquery.multiselect.hu.js
index 25302c1..bdc0366 100644
--- a/i18n/jquery.multiselect.hu.js
+++ b/i18n/jquery.multiselect.hu.js
@@ -4,8 +4,10 @@
(function ( $ ) {
$.extend($.ech.multiselect.prototype.options, {
- checkAllText: 'Mind kijelöl',
- uncheckAllText: 'Mind eltávolít',
+ linkInfo: {
+ checkAll: {text: 'Mind kijelöl', title: 'Mind kijelöl'},
+ uncheckAll: {text: 'Mind eltávolít', title: 'Mind eltávolít'}
+ },
noneSelectedText: 'Nincs kijelölés',
selectedText: '# kijelölve'
});
diff --git a/i18n/jquery.multiselect.it.js b/i18n/jquery.multiselect.it.js
index a984e44..2d9c640 100644
--- a/i18n/jquery.multiselect.it.js
+++ b/i18n/jquery.multiselect.it.js
@@ -4,8 +4,10 @@
(function ( $ ) {
$.extend($.ech.multiselect.prototype.options, {
- checkAllText: 'Seleziona tutto',
- uncheckAllText: 'Deseleziona tutto',
+ linkInfo: {
+ checkAll: {text: 'Seleziona tutto', title: 'Seleziona tutto'},
+ uncheckAll: {text: 'Deseleziona tutto', title: 'Deseleziona tutto'}
+ },
noneSelectedText: 'Seleziona le opzioni',
selectedText: '# selezionati'
});
diff --git a/i18n/jquery.multiselect.ja.js b/i18n/jquery.multiselect.ja.js
index e59eba1..86342c1 100644
--- a/i18n/jquery.multiselect.ja.js
+++ b/i18n/jquery.multiselect.ja.js
@@ -4,8 +4,10 @@
(function ( $ ) {
$.extend($.ech.multiselect.prototype.options, {
- checkAllText: 'すべて選択',
- uncheckAllText: '選択解除',
+ linkInfo: {
+ checkAll: {text: 'すべて選択', title: 'すべて選択'},
+ uncheckAll: {text: '選択解除', title: '選択解除'}
+ },
noneSelectedText: '選択してください',
selectedText: '#つ選択中'
});
diff --git a/i18n/jquery.multiselect.pl.js b/i18n/jquery.multiselect.pl.js
index 8043952..6a2ee01 100644
--- a/i18n/jquery.multiselect.pl.js
+++ b/i18n/jquery.multiselect.pl.js
@@ -1,11 +1,13 @@
-/* Spanish initialisation for the jQuery UI multiselect plugin. */
+/* Polish initialisation for the jQuery UI multiselect plugin. */
/* Written by Tomasz Mazur (contact@tomaszmazur.eu). */
(function ( $ ) {
$.extend($.ech.multiselect.prototype.options, {
- checkAllText: 'Zaznacz wszystkie',
- uncheckAllText: 'Odznacz wszystkie',
+ linkInfo: {
+ checkAll: {text: 'Zaznacz wszystkie', title: 'Zaznacz wszystkie'},
+ uncheckAll: {text: 'Odznacz wszystkie', title: 'Odznacz wszystkie'}
+ },
noneSelectedText: 'Wybierz opcje',
selectedText: 'Zaznaczono #'
});
diff --git a/i18n/jquery.multiselect.ru.js b/i18n/jquery.multiselect.ru.js
index efb4dc6..514d7f1 100644
--- a/i18n/jquery.multiselect.ru.js
+++ b/i18n/jquery.multiselect.ru.js
@@ -4,8 +4,10 @@
(function ( $ ) {
$.extend($.ech.multiselect.prototype.options, {
- checkAllText: 'Отметить все',
- uncheckAllText: 'Снять отметку со всех',
+ linkInfo: {
+ checkAll: {text: 'Отметить все', title: 'Отметить все'},
+ uncheckAll: {text: 'Снять отметку со всех', title: 'Снять отметку со всех'}
+ },
noneSelectedText: 'Выберите из списка',
selectedText: 'Выбрано #'
});
diff --git a/i18n/jquery.multiselect.tr.js b/i18n/jquery.multiselect.tr.js
index 5bfbe73..92f84bc 100644
--- a/i18n/jquery.multiselect.tr.js
+++ b/i18n/jquery.multiselect.tr.js
@@ -4,8 +4,10 @@
(function ( $ ) {
$.extend($.ech.multiselect.prototype.options, {
- checkAllText: 'Tümünü seç',
- uncheckAllText: 'Tümünü sil',
+ linkInfo: {
+ checkAll: {text: 'Tümünü seç', title: 'Tümünü seç'},
+ uncheckAll: {text: 'Tümünü sil', title: 'Tümünü sil'}
+ },
noneSelectedText: 'Seçenekleri belirleyin',
selectedText: '# adet seçildi'
});
diff --git a/i18n/jquery.multiselect.zh-cn.js b/i18n/jquery.multiselect.zh-cn.js
index 4889552..f1a53e7 100644
--- a/i18n/jquery.multiselect.zh-cn.js
+++ b/i18n/jquery.multiselect.zh-cn.js
@@ -4,8 +4,10 @@
(function ( $ ) {
$.extend($.ech.multiselect.prototype.options, {
- checkAllText: '全选',
- uncheckAllText: '清空',
+ linkInfo: {
+ checkAll: {text: '全选', title: '全选'},
+ uncheckAll: {text: '清空', title: '清空'}
+ },
noneSelectedText: '请选择',
selectedText: '# 已选择'
});
diff --git a/i18n/jquery.multiselect.zh-tw.js b/i18n/jquery.multiselect.zh-tw.js
index a4d3186..a5566c5 100644
--- a/i18n/jquery.multiselect.zh-tw.js
+++ b/i18n/jquery.multiselect.zh-tw.js
@@ -4,8 +4,10 @@
(function ( $ ) {
$.extend($.ech.multiselect.prototype.options, {
- checkAllText: '全選',
- uncheckAllText: '清空',
+ linkInfo: {
+ checkAll: {text: '全選', title: '全選'},
+ uncheckAll: {text: '清空', title: '清空'}
+ },
noneSelectedText: '請選擇',
selectedText: '# 已選擇'
});
diff --git a/src/jquery.multiselect.js b/src/jquery.multiselect.js
index 92b863b..11cf5d8 100644
--- a/src/jquery.multiselect.js
+++ b/src/jquery.multiselect.js
@@ -1,1568 +1,267 @@
/* jshint forin:true, noarg:true, noempty:true, eqeqeq:true, boss:true, undef:true, curly:true, browser:true, jquery:true */
/*
- * jQuery UI MultiSelect Widget 3.0.0
+ * jQuery MultiSelect UI Widget Filtering Plugin 3.0.0
* Copyright (c) 2012 Eric Hynds
*
- * Depends:
- * - jQuery 1.8+ (http://api.jquery.com/)
- * - jQuery UI 1.11 widget factory (http://api.jqueryui.com/jQuery.widget/)
+ * http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
*
- * Optional:
- * - jQuery UI effects
- * - jQuery UI position utility
+ * Depends:
+ * - jQuery UI MultiSelect widget
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
-(function($, undefined) {
- // Counter used to prevent collisions
- var multiselectID = 0;
- // Scroll bar width saved for auto menu width determinations.
- var _scrollbarWidth = 0;
-
- var defaultIcons = {
- 'open': '' + iconSet.open + ' '); // Necessary to simplify dynamically changing the open icon.
-
- this.$buttonlabel = $( document.createElement('span') )
- .html(options.noneSelectedText || $element[0].placeholder)
- .appendTo( $button );
-
- // Header controls, will contain the check all/uncheck all buttons
- // Depending on how the options are set, this may be empty or simply plain text
- var headerLinksHTML = ( headerOn === true
- ? (checkAllText === null ? '' : ' ' + iconSet.checkAll + (checkAllText ? '' + checkAllText + ' ' : '' ) + ' ' + iconSet.uncheckAll + (uncheckAllText ? '' + uncheckAllText + ' ' : '' ) + ' ' + iconSet.flipAll + '' + (flipAllText ? '' + flipAllText + ' ' : '' ) + ' ' + headerOn + ' ' : '') );
-
- this.$headerLinkContainer = $( document.createElement('ul') )
- .addClass('ui-helper-reset')
- .html(headerLinksHTML
- + ''
- + iconSet.close
- + '
- *
- *
- *
- * @param {node} option Option from select to be added to menu
- * @returns {object} jQuery object for menu option
- */
- _makeOption: function(option) {
- var self = this;
- var title = option.title || null;
- var elSelect = self.element.get(0);
- // Determine unique ID for the label & option tags
- var id = elSelect.id || self.multiselectID;
- var inputID = 'ui-multiselect-' + self.multiselectID + '-' + (option.id || id + '-option-' + self.inputIdCounter++);
- // Pick up the select type from the underlying element
- var isMultiple = elSelect.multiple;
- var isDisabled = option.disabled;
- var isSelected = option.selected;
-
- var input = document.createElement('input');
- var inputAttribs = {
- "type": isMultiple ? 'checkbox' : 'radio',
- "id": inputID,
- "title": title,
- "value": option.value,
- "name": self.options.addInputNames ? "multiselect_" + id : null,
- "checked": isSelected ? "checked" : null,
- "aria-selected": isSelected ? "true" : null,
- "disabled": isDisabled ? "disabled" : null,
- "aria-disabled": isDisabled ? "true" : null
- };
- for (var name in inputAttribs) {
- if (inputAttribs[name] !== null) {
- input.setAttribute(name,inputAttribs[name]);
+(function($) {
+ var rEscape = /[\-\[\]{}()*+?.,\\\^$|#\s]/g;
+
+ // "{{term}}" is a placeholder below for where the search term
+ // would be inserted in the resulting regular expression.
+ filterRules = {
+ 'contains': '{{term}}',
+ 'beginsWith': '^{{term}}',
+ 'endsWith': '{{term}}$',
+ 'exactMatch': '^{{term}}$',
+ 'containsNumber': '\d',
+ 'isNumeric': '^\d+$',
+ 'isNonNumeric': '^\D+$'
+ };
+
+ //Courtesy of underscore.js
+ function debounce(func, wait, immediate) {
+ var timeout;
+ return function() {
+ var context = this, args = arguments;
+ var later = function() {
+ timeout = null;
+ if (!immediate) {
+ func.apply(context, args);
}
+ };
+ var callNow = immediate && !timeout;
+ clearTimeout(timeout);
+ timeout = setTimeout(later, wait);
+ if (callNow) {
+ func.apply(context, args);
}
- // Clone data attributes
- var optionAttribs = option.attributes;
- var len = optionAttribs.length;
- for (var x = 0; x < len; x++) {
- var attribute = optionAttribs[x];
- if ( /^data\-.+/.test(attribute.name) ) {
- input.setAttribute(attribute.name, attribute.value);
- }
- }
-
- // Option text or html
- var span = document.createElement('span');
- if (self.options.htmlOptionText) {
- span.innerHTML = option.innerHTML;
- }
- else {
- span.textContent = option.textContent;
- }
-
- // Icon images for each item.
- var optionImageSrc = option.getAttribute('data-image-src');
- if (optionImageSrc) {
- var img = document.createElement('img');
- img.setAttribute('src', optionImageSrc);
- span.insertBefore(img, span.firstChild);
- }
-
- var label = document.createElement('label');
- label.setAttribute('for', inputID);
- if (title !== null) {
- label.setAttribute('title', title);
- }
- label.className += (isDisabled ? ' ui-state-disabled' : '')
- + (isSelected && !isMultiple ? ' ui-state-active' : '')
- + ' ui-corner-all';
- label.appendChild(input);
- label.appendChild(span);
-
- var item = document.createElement('li');
- item.className = (isDisabled ? 'ui-multiselect-disabled ' : '')
- + (option.className || '');
- item.appendChild(label);
-
- return item;
- },
-
- /**
- * Processes option and optgroup tags from underlying select to construct the menu's option list
- * This clears the items currently in this.$checkboxes
- * Defers to _makeOption to actually build the options
- * Resets the input ID counter
-
-
- */
- _buildOptionList: function() {
- var self = this;
- var list = [];
-
- this.inputIdCounter = 0;
-
- this.element.children().each( function() {
- var elem = this;
-
- if (elem.tagName === 'OPTGROUP') {
- var options = [];
-
- $(elem).children().each( function() {
- options.push(self._makeOption(this));
- });
-
- // Build the list section for this optgroup, complete w/ option inputs...
- var $optGroupItem = $( document.createElement('li') )
- .addClass('ui-multiselect-optgroup'
- + (self.options.groupColumns ? ' ui-multiselect-columns' : '')
- + (elem.className ? ' ' + elem.className : ''));
- var $optGroupLabel = $( document.createElement('a') ).text( elem.getAttribute('label') );
- var $optionGroup = $( document.createElement('ul') ).append(options);
- $optGroupItem.append($optGroupLabel, $optionGroup);
- list.push($optGroupItem);
- }
- else {
- list.push(self._makeOption(elem));
- }
- });
-
- this.$checkboxes.empty().append(list);
- },
-
- /**
- * Refreshes the widget's menu
- * - Refresh header links if required
- * - Rebuild option list
- * - Update the cached values for height, width, and cached elements
- * @param {boolean} init If false, broadcasts a refresh event
- */
- refresh: function(init) {
- var $element = this.element;
-
- // update header link container visibility if needed
- if (this.options.header) {
- this.$headerLinkContainer
- .find('.ui-multiselect-all, .ui-multiselect-none, .ui-multiselect-flip')
- .toggle( !!$element[0].multiple );
- }
- this._buildOptionList(); // Clear and rebuild the menu.
- this._updateCache(); // cache some more useful elements
-
- this._setButtonWidth();
- this.update(true);
-
- // broadcast refresh event; useful for widgets
- if (!init) {
- this._trigger('refresh');
- }
- },
-
- /**
- * Updates cached values used elsewhere in the widget
- */
- _updateCache: function() {
- // Invalidate cached dimensions to force recalcs.
- this._savedButtonWidth = 0;
- this._savedMenuWidth = 0;
- this._ulHeight = 0;
+ };
+ }
- // Recreate important cached jQuery objects
- this.$header = this.$menu.children('.ui-multiselect-header');
- this.$checkboxes = this.$menu.children('.ui-multiselect-checkboxes');
+ $.widget('ech.multiselectfilter', {
- // Update saved labels and inputs
- this.$labels = this.$menu.find('label');
- this.$inputs = this.$labels.children('input');
+ options: {
+ label: 'Filter:', // (string) The label to show with the input
+ placeholder: 'Enter keywords', // (string) The placeholder text to show in the input
+ filterRule: 'contains', // (string) Either a named filter rule from above or a regular expression containing {{term}} as a placeholder
+ searchGroups: false, // (true | false) If true, search option group labels and show an entire group on a match.
+ autoReset: false, // (true | false) If true, clear the filter each time the widget menu is closed.
+ width: null, // (number) Override default width set in css file (px). null will inherit
+ debounceMS: 250 // (number) Number of milleseconds to wait between running the search handler.
},
/**
- * Updates the button text
- * If selectedText option is a function, simply call it
- * The selectedList option determines how many options to display
- * before switching to # of # selected
- * @param {boolean} isDefault true if value is default value for the button
+ * Performs widget creation
+ * Widget API has already set this.element and this.options for us
+ * - Find the multiselect widget.
+ * - Create the filter input
+ * - Set up event handlers
+ * - Insert in header
+ * - Create text cache
+ * - Override toggleState
*/
- update: function(isDefault) {
- var self = this;
- var options = self.options;
- var selectedList = options.selectedList;
- var selectedText = options.selectedText;
- var $inputs = self.$inputs;
- var inputCount = $inputs.length;
- var $checked = $inputs.filter(':checked');
- var numChecked = $checked.length;
- var value;
-
- if (numChecked) {
- if (typeof selectedText === 'function') {
- value = selectedText.call(self, numChecked, inputCount, $checked.get());
- }
- else if (/\d/.test(selectedList) && selectedList > 0 && numChecked <= selectedList) {
- value = $checked.map(function() { return $(this).next().text() }).get().join(options.selectedListSeparator);
- }
- else {
- value = selectedText.replace('#', numChecked).replace('#', inputCount);
- }
- }
- else {
- value = options.noneSelectedText;
- }
-
- self._setButtonValue(value, isDefault);
-
- if ( !/\bbutton\b/.test( options.wrapText ) ) {
- this._setButtonWidth(true);
- }
-
- // Check if the menu needs to be repositioned due to button height changing from adding/removing selections.
- if (self._isOpen && self._savedButtonHeight != self.$button.outerHeight(false)) {
- self.position();
- }
- },
-
- /**
- * Sets the button text
- * @param {string} value content to be assigned to the button
- * @param {boolean} isDefault true if value is default value for the button
- */
- _setButtonValue: function(value, isDefault) {
- this.$buttonlabel[this.options.htmlButtonText ? 'html' : 'text'](value);
+ _create: function() {
+ var opts = this.options;
+ var $element = this.element;
- if (!!isDefault) {
- this.$button[0].defaultValue = value;
- }
- },
+ // get the multiselect instance
+ this.instance = $element.multiselect('instance');
- /**
- * Sets button events for mouse and keyboard interaction
- * Called by _bindEvents
- */
- _bindButtonEvents: function() {
- var self = this;
- var $button = this.$button;
- function clickHandler() {
- self[ self._isOpen ? 'close' : 'open' ]();
- return false;
- }
+ // store header; add filter class so the close/check all/uncheck all links can be positioned correctly
+ this.$header = this.instance.$menu.find('.ui-multiselect-header').addClass('ui-multiselect-hasfilter');
- $button
+ // wrapper $element
+ this.$input = $(document.createElement('input'))
+ .attr({
+ placeholder: opts.placeholder,
+ type: "search"
+ })
+ .css({ width: (/\d/.test(opts.width) ? opts.width + 'px' : null) })
.on({
- click: clickHandler,
- keypress: function(e) {
+ keydown: function(e) {
+ // prevent the enter key from submitting the form / closing the widget
+ if(e.which === 13)
+ e.preventDefault();
+ else if(e.which === 27) {
+ $element.multiselect('close');
+ e.preventDefault();
+ }
+ else if(e.which === 9 && e.shiftKey) {
+ $element.multiselect('close');
+ e.preventDefault();
+ }
+ else if(e.altKey) {
switch(e.which) {
- case 27: // esc
- case 38: // up
- case 37: // left
- self.close();
+ case 82:
+ e.preventDefault();
+ $(this).val('').trigger('input', '');
break;
- case 39: // right
- case 40: // down
- self.open();
+ case 65:
+ $element.multiselect('checkAll');
+ break;
+ case 85:
+ $element.multiselect('uncheckAll');
+ break;
+ case 70:
+ $element.multiselect('flipAll');
+ break;
+ case 76:
+ $element.multiselect('instance').$labels.first().trigger("mouseenter");
break;
}
- },
- mouseenter: function() {
- if (!$button.hasClass('ui-state-disabled')) {
- $button.addClass('ui-state-hover');
- }
- },
- mouseleave: function() {
- $button.removeClass('ui-state-hover');
- },
- focus: function() {
- if (!$button.hasClass('ui-state-disabled')) {
- $button.addClass('ui-state-focus');
- }
- },
- blur: function() {
- $button.removeClass('ui-state-focus');
- }
- })
- // webkit doesn't like it when you click on the span :(
- .find('span')
- .on('click.multiselect,click', clickHandler);
- },
- /**
- * Bind events to the menu for options and option groups
- * This methond scopes actions to filtered options
- * Called by _bindEvents
- */
- _bindMenuEvents: function() {
- var self = this;
- // optgroup label toggle support
- this.$menu.on('click.multiselect', '.ui-multiselect-optgroup a', function(e) {
- e.preventDefault();
-
- var $this = $(this);
- var $inputs = $this.next('ul').find('input').filter(':visible:not(:disabled)');
- var nodes = $inputs.get();
- var label = this.textContent;
-
- // trigger before callback and bail if the return is false
- if (self._trigger('beforeoptgrouptoggle', e, { inputs:nodes, label:label }) === false) {
- return;
- }
-
- // if maxSelected is in use, cannot exceed it
- var maxSelected = self.options.maxSelected;
- if (maxSelected && (self.$inputs.filter(':checked').length + $inputs.length > maxSelected) ) {
- return;
- }
-
- // toggle inputs
- self._toggleChecked(
- $inputs.filter(':checked').length !== $inputs.length,
- $inputs
- );
-
- self._trigger('optgrouptoggle', e, {
- inputs: nodes,
- label: label,
- checked: nodes.length ? nodes[0].checked : null
- });
- })
- .on('mouseenter.multiselect', 'label', function() {
- if (!$(this).hasClass('ui-state-disabled')) {
- self.$labels.removeClass('ui-state-hover');
- $(this).addClass('ui-state-hover').find('input').focus();
- }
- })
- // Keyboard navigation of the menu
- .on('keydown.multiselect', 'label', function(e) {
- // Don't capture function keys or 'r'
- if (e.which === 82) {
- return; // r
- }
-
- if (e.which > 111 && e.which < 124) {
- return; // Function keys.
- }
-
- e.preventDefault();
- switch(e.which) {
- case 9: // tab
- if (e.shiftKey) {
- self.$menu.find(".ui-state-hover").removeClass("ui-state-hover");
- self.$header.find("li").last().find("a").focus();
- }
- else {
- self.close();
- }
- break;
- case 27: // esc
- self.close();
- break;
- case 38: // up
- case 40: // down
- case 37: // left
- case 39: // right
- self._traverse(e.which, this);
- break;
- case 13: // enter
- case 32: // space
- $(this).find('input')[0].click();
- break;
- case 65: // Alt-A
- if (e.altKey) {
- self.checkAll();
- }
- break;
- case 70: // Alt-F
- if (e.altKey) {
- self.flipAll();
- }
- break;
- case 85: // Alt-U
- if (e.altKey) {
- self.uncheckAll();
- }
- break;
- }
- })
- .on('click.multiselect', 'input[type="checkbox"], input[type="radio"]', function(e) {
- // Reference to this checkbox / radio input
- var input = this;
- var $input = $(input);
- var val = input.value;
- var checked = input.checked;
- // self is cached from outer scope above
- var $element = self.element;
- var $tags = $element.find('option');
- var isMultiple = $element[0].multiple;
- var $allInputs = self.$inputs;
- var numChecked = $allInputs.filter(":checked").length;
- var options = self.options;
- var optionText = $input.parent().find("span")[options.htmlOptionText ? 'html' : 'text']();
- var maxSelected = options.maxSelected;
-
- // bail if this input is disabled or the event is cancelled
- if (input.disabled || self._trigger('click', e, { value: val, text: optionText, checked: checked }) === false) {
- e.preventDefault();
- return;
- }
-
- if ( maxSelected && checked && numChecked > maxSelected) {
- if ( self._trigger('maxselected', e, { labels: self.$labels, inputs: $allInputs }) !== false ) {
- self.buttonMessage("LIMIT OF " + (numChecked - 1) + " REACHED! Flip All Not Permitted. ' + value + ' ');
- }
- break;
- case 'checkAllText':
- case 'uncheckAllText':
- case 'flipAllText':
- if (key !== 'checkAllText' || !this.options.maxSelected) {
- $menu.find('a.ui-multiselect-' + {'checkAllText': 'all', 'uncheckAllText': 'none', 'flipAllText': 'flip'}[key] + ' span').eq(-1).text(value); // eq(-1) finds the last span
- }
- break;
- case 'checkAllIcon':
- case 'uncheckAllIcon':
- case 'flipAllIcon':
- if (key !== 'checkAllIcon' || !this.options.maxSelected) {
- $menu.find('a.ui-multiselect-' + {'checkAllIcon': 'all', 'uncheckAllIcon': 'none', 'flipAllIcon': 'flip'}[key] + ' span').eq(0).replaceWith(value); // eq(0) finds the first span
- }
- break;
- case 'openIcon':
- $menu.find('span.ui-multiselect-open').html(value);
- break;
- case 'closeIcon':
- $menu.find('a.ui-multiselect-close').html(value);
- break;
- case 'height':
- this.options[key] = value;
- this._setMenuHeight(true); // true forces recalc of cached value.
- break;
- case 'buttonWidth':
- case 'menuWidth':
- this.options[key] = value;
- this._setButtonWidth(true); // true forces recalc of cached value.
- this._setMenuWidth(true); // true forces recalc of cached value.
- break;
- case 'selectedText':
- case 'selectedList':
- case 'maxSelected':
- case 'noneSelectedText':
- case 'selectedListSeparator':
- this.options[key] = value; // these all need to update immediately for the update() call
- this.update(true);
- break;
- case 'classes':
- $menu.add(this.$button).removeClass(this.options.classes).addClass(value);
- break;
- case 'multiple':
- var $element = this.element;
- if (!!$element[0].multiple !== value) {
- $menu.toggleClass('ui-multiselect-multiple', value).toggleClass('ui-multiselect-single', !value);
- $element[0].multiple = value;
- this.uncheckAll();
- this.refresh();
- }
- break;
- case 'position':
- if (value !== null && !$.isEmptyObject(value) ) {
- this.options.position = value;
- }
- this.position();
- break;
- case 'zIndex':
- this.options.zIndex = value;
- this.$menu.css('z-index', value);
- break;
- }
- $.Widget.prototype._setOption.apply(this, arguments);
- },
-
+ destroy: function() {
+ $.Widget.prototype.destroy.call(this);
+ this.$input.val('').trigger("keyup");
+ this.instance.$menu.find('.ui-multiselect-header').removeClass('ui-multiselect-hasfilter');
+ this.$wrapper.remove();
+ }
});
- // Fix for jQuery UI modal dialogs
- // https://api.jqueryui.com/dialog/#method-_allowInteraction
- // https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/
- if ($.ui && $.ui.dialog) {
- $.widget( "ui.dialog", $.ui.dialog, {
- _allowInteraction: function( event ) {
- if ( this._super( event ) || $( event.target ).closest('.ui-multiselect-menu' ).length ) {
- return true;
- }
- }
- });
- }
-
})(jQuery);
diff --git a/tests/unit/events.js b/tests/unit/events.js
index 154cb51..30b8f10 100644
--- a/tests/unit/events.js
+++ b/tests/unit/events.js
@@ -22,7 +22,7 @@
// now try to open it..
el.multiselect("open");
-
+
// make sure the width of the menu and button are equivalent
assert.equal( button().outerWidth(), menu().outerWidth(), 'button and menu widths are equivalent');
@@ -265,6 +265,7 @@
assert.ok(true, "the select's change event fires");
})
.multiselect({
+ groupsSelectable: true,
beforeoptgrouptoggle: function(e,ui){
assert.equal(this, el[0], "option: context of callback");
assert.equal(e.type, 'multiselectbeforeoptgrouptoggle', 'option: event type in callback');
@@ -308,6 +309,7 @@
el = $('Option 1 Option 2 jQuery UI MultiSelect Widget Unit Tests
foo bar ');
diff --git a/tests/unit/options.js b/tests/unit/options.js
index cff7899..0541ba3 100644
--- a/tests/unit/options.js
+++ b/tests/unit/options.js
@@ -69,7 +69,18 @@
});
el.multiselect("checkAll");
- assert.equal(button().text(), 'foo "with quotes", bar, baz', 'after checkAll, button text is a list of all options in the select');
+ assert.equal(button().text(), 'foo "with quotes", bar, baz', '(plain text list separator & button text) after checkAll, button text is a list of all options in the select');
+ el.multiselect("destroy").remove();
+
+ el = $(html).appendTo("body").multiselect({
+ selectedList: 3,
+ selectedListSeparator: ',{{icon}} ', 'open') );
+
+ this.$buttonlabel = $( document.createElement('span') )
+ .html(options.noneSelectedText || $element[0].placeholder)
+ .appendTo( $button );
+ }
+
+ // Header controls will contain the links & ordering specified by the header option.
+ // Depending on how the options are set, this may be empty or simply plain text
+ var headerLinksHTML = '';
+ if (options.header === false) {} // no-op for no header
+ else if (options.header.charAt(0) === '=') {
+ headerLinksHTML = '' + options.header.slice(1) + ' ';
+ }
+ else {
+ var hdrLinkTemplate = '{{icon}}{{text}} <\/span/ig, '');
}
- }
- },
- input: $.proxy(debounce(this._handler, opts.debounceMS), this),
- search: $.proxy(this._handler, this)
- });
+ }
+ }
+
+ this.$headerLinkContainer = $( document.createElement('ul') )
+ .addClass('ui-helper-reset')
+ .html( headerLinksHTML
+ + ( !options.listbox
+ ? _linkHTML('{{icon}}
+ *
+ *
+ *
+ * @param {node} option Option from select to be added to menu
+ * @returns {object} jQuery object for menu option
+ */
+ _makeOption: function(option) {
+ var self = this;
+ var title = option.title || null;
+ var elSelect = self.element.get(0);
+ // Determine unique ID for the label & option tags
+ var id = elSelect.id || self.multiselectID;
+ var inputID = 'ui-multiselect-' + self.multiselectID + '-' + (option.id || id + '-option-' + self.inputIdCounter++);
+ // Pick up the select type from the underlying element
+ var isMultiple = elSelect.multiple;
+ var isDisabled = option.disabled;
+ var isSelected = option.selected;
+
+ var input = document.createElement('input');
+ var inputAttribs = {
+ "type": isMultiple ? 'checkbox' : 'radio',
+ "id": inputID,
+ "title": title,
+ "value": option.value,
+ "name": self.options.addInputNames ? "multiselect_" + id : null,
+ "checked": isSelected ? "checked" : null,
+ "aria-selected": isSelected ? "true" : null,
+ "disabled": isDisabled ? "disabled" : null,
+ "aria-disabled": isDisabled ? "true" : null
};
+ for (var name in inputAttribs) {
+ if (inputAttribs[name] !== null) {
+ input.setAttribute(name,inputAttribs[name]);
+ }
+ }
+ // Clone data attributes
+ var optionAttribs = option.attributes;
+ var len = optionAttribs.length;
+ for (var x = 0; x < len; x++) {
+ var attribute = optionAttribs[x];
+ if ( /^data\-.+/.test(attribute.name) ) {
+ input.setAttribute(attribute.name, attribute.value);
+ }
+ }
+ // Option text or html
+ var span = document.createElement('span');
+ if (self.options.htmlOptionText) {
+ span.innerHTML = option.innerHTML;
+ }
+ else {
+ span.textContent = option.textContent;
+ }
+
+ // Icon images for each item.
+ var optionImageSrc = option.getAttribute('data-image-src');
+ if (optionImageSrc) {
+ var img = document.createElement('img');
+ img.setAttribute('src', optionImageSrc);
+ span.insertBefore(img, span.firstChild);
+ }
+
+ var label = document.createElement('label');
+ label.setAttribute('for', inputID);
+ if (title !== null) {
+ label.setAttribute('title', title);
+ }
+ label.className += (isDisabled ? ' ui-state-disabled' : '')
+ + (isSelected && !isMultiple ? ' ui-state-active' : '')
+ + ' ui-corner-all';
+ label.appendChild(input);
+ label.appendChild(span);
+
+ var item = document.createElement('li');
+ item.className = (isDisabled ? 'ui-multiselect-disabled ' : '')
+ + (option.className || '');
+ item.appendChild(label);
+
+ return item;
+ },
+
+ /**
+ * Processes option and optgroup tags from underlying select to construct the menu's option list
+ * If groupsCollapsable option is set, adds collapse/expand buttons for each option group.
+ * This replaces the current contents of this.$checkboxes
+ * Defers to _makeOption to actually build the options
+ * Resets the input ID counter
+ */
+ _buildOptionList: function() {
+ var self = this;
+ var list = [];
+
+ this.inputIdCounter = 0;
+
+ this.element.children().each( function() {
+ var elem = this;
+
+ if (elem.tagName.toUpperCase() === 'OPTGROUP') {
+ var options = [];
+
+ $(elem).children().each( function() {
+ options.push(self._makeOption(this));
+ });
+
+ // Build the list section for this optgroup, complete w/ option inputs...
+ var $collapseButton = !!self.options.groupsCollapsable
+ ? $( document.createElement('button') )
+ .attr({'style': 'float:left', 'title': self.linkInfo.collapse.title})
+ .addClass('ui-state-default ui-corner-all')
+ .html(self.linkInfo.collapse.icon)
+ : null;
+ var $optGroupLabel = $( document.createElement('a') ).text( elem.getAttribute('label') );
+ var $optionGroup = $( document.createElement('ul') ).append(options);
+ var $optGroupItem = $( document.createElement('li') )
+ .addClass('ui-multiselect-optgroup'
+ + (self.options.groupColumns ? ' ui-multiselect-columns' : '')
+ + (elem.className ? ' ' + elem.className : ''))
+ .append($collapseButton, $optGroupLabel, $optionGroup)
+ list.push($optGroupItem);
+ }
+ else {
+ list.push(self._makeOption(elem));
+ }
+ });
+
+ this.$checkboxes.empty().append(list);
+ },
+
+ /**
+ * Refreshes the widget's menu
+ * - Refresh header links if required
+ * - Rebuild option list
+ * - Update the cached values for height, width, and cached elements
+ * - If listbox option is set, shows the menu and sets menu size.
+ * @param {boolean} init If false, broadcasts a refresh event
+ */
+ refresh: function(init) {
+ var $element = this.element;
+
+ // update header link container visibility if needed
+ if (this.options.header !== false) {
+ this.$headerLinkContainer
+ .find('.ui-multiselect-all, .ui-multiselect-none, .ui-multiselect-flip')
+ .toggle( !!$element[0].multiple );
+ }
+
+ this._buildOptionList(); // Clear and rebuild the menu.
+ this._updateCache(); // cache some more useful elements
+
+ if (!this.options.listbox) {
+ this._setButtonWidth();
+ this.update(true);
+ }
+ else {
+ if (!this._isOpen) {
+ this.$menu.show();
+ this._isOpen = true;
+ }
+ this._setMenuWidth();
+ this._setMenuHeight();
+ }
+
+ // broadcast refresh event; useful for widgets
+ if (!init) {
+ this._trigger('refresh');
+ }
+ },
+
+ /**
+ * Updates cached values used elsewhere in the widget
+ * Causes the filter to also update its cache if the filter is loaded
+ */
+ _updateCache: function() {
+ // Invalidate cached dimensions to force recalcs.
+ this._savedButtonWidth = 0;
+ this._savedMenuWidth = 0;
+ this._savedMenuHeight = 0;
+
+ // Recreate important cached jQuery objects
+ this.$header = this.$menu.children('.ui-multiselect-header');
+ this.$checkboxes = this.$menu.children('.ui-multiselect-checkboxes');
+
+ // Update saved labels and inputs
+ this.$labels = this.$menu.find('label');
+ this.$inputs = this.$labels.children('input');
+
+ // If the filter widget is in use, then also update its cache.
+ if ( this.element.is(':data("ech-multiselectfilter")') ) {
+ this.element.multiselectfilter('instance').updateCache(true);
+ }
+ },
+
+ /**
+ * Updates the widget checkboxes' checked states
+ * from the native select options' selected states.
+ * @param {boolean} skipDisabled If true, disabled options in either are skipped.
+ */
+ resync : function(skipDisabled) {
+ var $inputs = this.$inputs;
+ var $options = this.element.find('options');
+
+ if ($inputs.length === $options.length) {
+ var inputValues = {};
+ $inputs.not(!!skipDisabled ? ':disabled' : '').each( function() {
+ inputValues[this.value] = this;
+ });
+ $options.not(!!skipDisabled ? ':disabled' : '').each( function() {
+ if (this.value in inputValues) {
+ inputValues[this.value].checked = this.selected;
+ }
+ });
+ this._trigger('resync');
+ this.update();
+ }
+ else {
+ this.refresh();
+ }
},
/**
- * Handles searches as text is entered in the filter box.
- * Uses a text cache to speed up searching.
- * Debouncing is done to limit how often this is ran.
- * Alternate filter rules can be used.
- * Option group labels may be searched, also.
- * @param (object) event object from original event.
+ * Updates the button text
+ * If selectedText option is a function, simply call it
+ * The selectedList option determines how many options to display
+ * before switching to # of # selected
+ * @param {boolean} isDefault true if value is default value for the button
*/
- _handler: function(e) {
- var term = this.$input[0].value.toLowerCase().replace(/^\s+|\s+$/g,''),
- filterRule = this.options.filterRule || 'contains',
- regex = new RegExp( ( filterRules[filterRule] || filterRule ).replace('{{term}}', term.replace(rEscape, "\\$&")), 'i'),
- searchGroups = !!this.options.searchGroups,
- $checkboxes = this.instance.$checkboxes,
- cache = this.cache, // Cached text() object
- optgroupClass = "ui-multiselect-optgroup",
- hiddenClass = 'ui-multiselect-excluded';
-
- this.$rows.toggleClass(hiddenClass, !!term);
- if (!searchGroups) {
- // If not searching in groups then show all group headings in the results.
- $checkboxes.find('.' + optgroupClass).removeClass(hiddenClass);
- }
- var filteredInputs = $checkboxes.children().map(function(x) {
- var $this = $(this),
- $groupItems = $this,
- groupShown = !searchGroups;
-
- // Account for optgroups
- // If we are searching in option group labels and we match an optgroup label,
- // then show all its children and return all its inputs also.
- if ($this.hasClass(optgroupClass)) {
- var $groupItems = $this.find('li');
- if (searchGroups && regex.test( cache[x] ) ) {
- $this.removeClass(hiddenClass);
- $groupItems.removeClass(hiddenClass);
- return $groupItems.find('input').get();
- }
+ update: function(isDefault) {
+ if (!!this.options.listbox) {
+ return;
+ }
+ var self = this;
+ var options = self.options;
+ var selectedList = options.selectedList;
+ var selectedText = options.selectedText;
+ var $inputs = self.$inputs;
+ var inputCount = $inputs.length;
+ var $checked = $inputs.filter(':checked');
+ var numChecked = $checked.length;
+ var value;
+
+ if (numChecked) {
+ if (typeof selectedText === 'function') {
+ value = selectedText.call(self, numChecked, inputCount, $checked.get());
}
+ else if (/\d/.test(selectedList) && selectedList > 0 && numChecked <= selectedList) {
+ value = $checked.map(function() { return $(this).next().text() }).get().join(options.selectedListSeparator);
+ }
+ else {
+ value = selectedText.replace('#', numChecked).replace('#', inputCount);
+ }
+ }
+ else {
+ value = options.noneSelectedText;
+ }
+
+ self._setButtonValue(value, isDefault);
+
+ if ( !/\bbutton\b/.test( options.wrapText ) ) {
+ this._setButtonWidth(true);
+ }
+
+ // Check if the menu needs to be repositioned due to button height changing from adding/removing selections.
+ if (self._isOpen && self._savedButtonHeight != self.$button.outerHeight(false)) {
+ self.position();
+ }
+ },
+
+ /**
+ * Sets the button text
+ * @param {string} value content to be assigned to the button
+ * @param {boolean} isDefault true if value is default value for the button
+ */
+ _setButtonValue: function(value, isDefault) {
+ this.$buttonlabel[this.options.htmlButtonText ? 'html' : 'text'](value);
+
+ if (!!isDefault) {
+ this.$button[0].defaultValue = value;
+ }
+ },
+
+ /**
+ * Sets button events for mouse and keyboard interaction
+ * Called by _bindEvents
+ */
+ _bindButtonEvents: function() {
+ var self = this;
+ var $button = this.$button;
+ function clickHandler() {
+ self[ self._isOpen ? 'close' : 'open' ]();
+ return false;
+ }
- return $groupItems.map(function(y) {
- var $listItem = $(this);
- if ( regex.test( cache[x + '.' + y] ) ) {
- // Show the opt group heading if needed
- if (!groupShown) {
- $this.removeClass(hiddenClass);
- groupShown = true;
+ $button
+ .on({
+ click: clickHandler,
+ keydown: function(e) {
+ switch(e.which) {
+ case 27: // esc
+ case 37: // left
+ self.close();
+ break;
+ case 38: // up
+ case 40: // down
+ // Change selection via up/down on a closed single select.
+ if (!self._isOpen && !self.element[0].multiple) {
+ var prev, current = null, next = null;
+ self.$inputs.each( function() {
+ prev = current;
+ current = next;
+ next = this;
+ if (current !== null && current.checked) {
+ return false;
+ }
+ });
+ if (e.which === 38 && prev !== null) {
+ $(prev).trigger('click');
+ }
+ else if (e.which === 40 && !next.checked) {
+ $(next).trigger('click');
+ }
+ break;
+ }
+ else if (e.which === 38) { // up for multiple select
+ self.close();
+ }
+ // down for multiple select falls through
+ case 39: // right
+ self.open();
+ break;
+ }
+ },
+ mouseenter: function() {
+ if (!$button.hasClass('ui-state-disabled')) {
+ $button.addClass('ui-state-hover');
}
- $listItem.removeClass(hiddenClass);
- return this.getElementsByTagName('input')[0];
+ },
+ mouseleave: function() {
+ $button.removeClass('ui-state-hover');
+ },
+ focus: function() {
+ if (!$button.hasClass('ui-state-disabled')) {
+ $button.addClass('ui-state-focus');
+ }
+ },
+ blur: function() {
+ $button.removeClass('ui-state-focus');
}
- return null;
+ })
+ // webkit doesn't like it when you click on the span :(
+ .find('span')
+ .on('click.multiselect,click', clickHandler);
+ },
+
+ /**
+ * Bind events to the checkboxes for options and option groups
+ * Must be bound to the checkboxes container.
+ * This method scopes actions to filtered options
+ * Called by _bindEvents
+ */
+ _bindMenuEvents: function() {
+ var self = this;
+
+ // optgroup label toggle support
+ self.$checkboxes.on('click.multiselect', 'a', function(e) {
+ e.preventDefault();
+
+ if (!self.options.groupsSelectable) {
+ return false;
+ }
+
+ var $this = $(this);
+ var $inputs = $this.next('ul').find('input').filter(':visible:not(:disabled)');
+ var nodes = $inputs.get();
+ var label = this.textContent;
+
+ // trigger before callback and bail if the return is false
+ if (self._trigger('beforeoptgrouptoggle', e, { inputs:nodes, label:label }) === false) {
+ return;
+ }
+
+ // if maxSelected is in use, cannot exceed it
+ var maxSelected = self.options.maxSelected;
+ if (maxSelected && (self.$inputs.filter(':checked').length + $inputs.length > maxSelected) ) {
+ return;
+ }
+
+ // toggle inputs
+ self._toggleChecked(
+ $inputs.filter(':checked').length !== $inputs.length,
+ $inputs
+ );
+
+ self._trigger('optgrouptoggle', e, {
+ inputs: nodes,
+ label: label,
+ checked: nodes.length ? nodes[0].checked : null
});
+ })
+ // collapse button
+ .on('click.multiselect', 'button', function(e) {
+ var $this = $(this),
+ $parent = $this.parent(),
+ optgroupLabel = $parent.find('a').html(),
+ linkInfo = self.linkInfo,
+ collapsedClass = 'ui-multiselect-collapsed',
+ isCollapsed = $parent.hasClass(collapsedClass);
+
+ if (self._trigger('beforecollapsetoggle', e, { label: optgroupLabel , collapsed: isCollapsed }) === false) {
+ return;
+ }
+ $this.parent().toggleClass(collapsedClass);
+
+ $this.attr('title', isCollapsed ? linkInfo.collapse.title : linkInfo.expand.title)
+ .html(isCollapsed ? linkInfo.collapse.icon : linkInfo.expand.icon );
+
+ self._trigger('collapsetoggle', e, { label: optgroupLabel, collapsed: !isCollapsed });
+ })
+ // collapse button
+ .on('mouseenter.multiselect', 'button', function(e) {
+ $(this).addClass('ui-state-hover');
+ })
+ // collapse button
+ .on('mouseleave.multiselect', 'button', function(e) {
+ $(this).removeClass('ui-state-hover');
+ })
+ // option label
+ .on('mouseenter.multiselect', 'label', function() {
+ if (!$(this).hasClass('ui-state-disabled')) {
+ self.$labels.removeClass('ui-state-hover');
+ $(this).addClass('ui-state-hover').find('input').focus();
+ }
+ })
+ // Keyboard navigation of the menu
+ .on('keydown.multiselect', 'label', function(e) {
+ // Don't capture function keys or 'r'
+ if (e.which === 82) {
+ return; // r
+ }
+
+ if (e.which > 111 && e.which < 124) {
+ return; // Function keys.
+ }
+
+ e.preventDefault();
+ switch(e.which) {
+ case 9: // tab
+ if (e.shiftKey) {
+ self.$menu.find(".ui-state-hover").removeClass("ui-state-hover");
+ self.$header.find("li").last().find("a").focus();
+ }
+ else {
+ self.close();
+ }
+ break;
+ case 27: // esc
+ self.close();
+ break;
+ case 38: // up
+ case 40: // down
+ case 37: // left
+ case 39: // right
+ self._traverse(e.which, this);
+ break;
+ case 13: // enter
+ case 32: // space
+ $(this).find('input')[0].click();
+ break;
+ case 65: // Alt-A
+ if (e.altKey) {
+ self.checkAll();
+ }
+ break;
+ case 70: // Alt-F
+ if (e.altKey) {
+ self.flipAll();
+ }
+ break;
+ case 85: // Alt-U
+ if (e.altKey) {
+ self.uncheckAll();
+ }
+ break;
+ }
+ })
+ .on('click.multiselect', 'input', function(e) {
+ // Reference to this checkbox / radio input
+ var input = this;
+ var $input = $(input);
+ var val = input.value;
+ var checked = input.checked;
+ // self is cached from outer scope above
+ var $element = self.element;
+ var $tags = $element.find('option');
+ var isMultiple = $element[0].multiple;
+ var $allInputs = self.$inputs;
+ var numChecked = $allInputs.filter(":checked").length;
+ var options = self.options;
+ var optionText = $input.parent().find("span")[options.htmlOptionText ? 'html' : 'text']();
+ var maxSelected = options.maxSelected;
+
+ // bail if this input is disabled or the event is cancelled
+ if (input.disabled || self._trigger('click', e, { value: val, text: optionText, checked: checked }) === false) {
+ e.preventDefault();
+ return;
+ }
+
+ if ( maxSelected && checked && numChecked > maxSelected) {
+ if ( self._trigger('maxselected', e, { labels: self.$labels, inputs: $allInputs }) !== false ) {
+ self.buttonMessage("LIMIT OF " + (numChecked - 1) + " REACHED! Flip All Not Permitted. ' + value + ' ');
+ }
+ break;
+ case 'checkAllText':
+ case 'uncheckAllText':
+ case 'flipAllText':
+ case 'collapseAllText':
+ case 'expandAllText':
+ if (key !== 'checkAllText' || !this.options.maxSelected) {
+ // eq(-1) finds the last span
+ $header.find('a.' + this.linkInfo[key.replace('Text','')].class + ' span').eq(-1).text(value);
+ }
+ break;
+ case 'checkAllIcon':
+ case 'uncheckAllIcon':
+ case 'flipAllIcon':
+ case 'collapseAllIcon':
+ case 'expandAllIcon':
+ if (key !== 'checkAllIcon' || !this.options.maxSelected) {
+ // eq(0) finds the first span
+ $header.find('a.' + this.linkInfo[key.replace('Icon','')].class + ' span').eq(0).replaceWith(value);
+ }
+ break;
+ case 'openIcon':
+ $menu.find('span.ui-multiselect-open').html(value);
+ break;
+ case 'closeIcon':
+ $menu.find('a.ui-multiselect-close').html(value);
+ break;
+ case 'buttonWidth':
+ case 'menuWidth':
+ this.options[key] = value;
+ this._setButtonWidth(true); // true forces recalc of cached value.
+ this._setMenuWidth(true); // true forces recalc of cached value.
+ break;
+ case 'menuHeight':
+ this.options[key] = value;
+ this._setMenuHeight(true); // true forces recalc of cached value.
+ break;
+ case 'selectedText':
+ case 'selectedList':
+ case 'maxSelected':
+ case 'noneSelectedText':
+ case 'selectedListSeparator':
+ this.options[key] = value; // these all need to update immediately for the update() call
+ this.update(true);
+ break;
+ case 'classes':
+ $menu.add(this.$button).removeClass(this.options.classes).addClass(value);
+ break;
+ case 'multiple':
+ var $element = this.element;
+ if (!!$element[0].multiple !== value) {
+ $menu.toggleClass('ui-multiselect-multiple', value).toggleClass('ui-multiselect-single', !value);
+ $element[0].multiple = value;
+ this.uncheckAll();
+ this.refresh();
+ }
+ break;
+ case 'position':
+ if (value !== null && !$.isEmptyObject(value) ) {
+ this.options.position = value;
+ }
+ this.position();
+ break;
+ case 'zIndex':
+ this.options.zIndex = value;
+ this.$menu.css('z-index', value);
+ break;
+ default:
+ this.options[key] = value;
+ }
+ $.Widget.prototype._setOption.apply(this, arguments);
+ },
+
});
+ // Fix for jQuery UI modal dialogs
+ // https://api.jqueryui.com/dialog/#method-_allowInteraction
+ // https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/
+ if ($.ui && 'dialog' in $.ui) {
+ $.widget( "ui.dialog", $.ui.dialog, {
+ _allowInteraction: function( event ) {
+ if ( this._super( event ) || $( event.target ).closest('.ui-multiselect-menu' ).length ) {
+ return true;
+ }
+ }
+ });
+ }
+
})(jQuery);
From 31e5da17d93ca3eb1de4f528cb6359607bd7dacc Mon Sep 17 00:00:00 2001
From: Steve James <4stevejames@gmail.com>
Date: Sun, 25 Feb 2018 00:57:10 -0800
Subject: [PATCH 3/9] File mix-up
---
src/jquery.multiselect.filter.js | 189 +++++++++++++++++++++----------
1 file changed, 130 insertions(+), 59 deletions(-)
diff --git a/src/jquery.multiselect.filter.js b/src/jquery.multiselect.filter.js
index c91ddf5..c7cd410 100644
--- a/src/jquery.multiselect.filter.js
+++ b/src/jquery.multiselect.filter.js
@@ -16,6 +16,18 @@
(function($) {
var rEscape = /[\-\[\]{}()*+?.,\\\^$|#\s]/g;
+ // "{{term}}" is a placeholder below for where the search term
+ // would be inserted in the resulting regular expression.
+ filterRules = {
+ 'contains': '{{term}}',
+ 'beginsWith': '^{{term}}',
+ 'endsWith': '{{term}}$',
+ 'exactMatch': '^{{term}}$',
+ 'containsNumber': '\d',
+ 'isNumeric': '^\d+$',
+ 'isNonNumeric': '^\D+$'
+ };
+
//Courtesy of underscore.js
function debounce(func, wait, immediate) {
var timeout;
@@ -39,13 +51,25 @@
$.widget('ech.multiselectfilter', {
options: {
- label: 'Filter:',
- width: null, /* override default width set in css file (px). null will inherit */
- placeholder: 'Enter keywords',
- autoReset: false,
- debounceMS: 250
+ label: 'Filter:', // (string) The label to show with the input
+ placeholder: 'Enter keywords', // (string) The placeholder text to show in the input
+ filterRule: 'contains', // (string) Either a named filter rule from above or a regular expression containing {{term}} as a placeholder
+ searchGroups: false, // (true | false) If true, search option group labels and show an entire group on a match.
+ autoReset: false, // (true | false) If true, clear the filter each time the widget menu is closed.
+ width: null, // (number) Override default width set in css file (px). null will inherit
+ debounceMS: 250 // (number) Number of milleseconds to wait between running the search handler.
},
+ /**
+ * Performs widget creation
+ * Widget API has already set this.element and this.options for us
+ * - Find the multiselect widget.
+ * - Create the filter input
+ * - Set up event handlers
+ * - Insert in header
+ * - Create text cache
+ * - Override toggleState
+ */
_create: function() {
var opts = this.options;
var $element = this.element;
@@ -88,6 +112,9 @@
case 85:
$element.multiselect('uncheckAll');
break;
+ case 70:
+ $element.multiselect('flipAll');
+ break;
case 76:
$element.multiselect('instance').$labels.first().trigger("mouseenter");
break;
@@ -97,98 +124,142 @@
input: $.proxy(debounce(this._handler, opts.debounceMS), this),
search: $.proxy(this._handler, this)
});
+
// automatically reset the widget on close?
if (this.options.autoReset)
$element.on('multiselectclose', $.proxy(this._reset, this));
- // rebuild cache when multiselect is updated
- $element.on('multiselectrefresh', $.proxy(function() {
- this.updateCache();
- this._handler();
- }, this));
+ var $label = $(document.createElement('label')).text(opts.label).append(this.$input);
this.$wrapper = $(document.createElement('div'))
.addClass(' ui-multiselect-filter')
- .text(opts.label)
- .append(this.$input)
+ .append($label)
.prependTo(this.$header);
- // reference to the actual inputs
- this.$inputs = this.instance.$inputs;
+ // If menu already opened, have to reset menu height since
+ // addition of the filter input changes the header height calc.
+ if (!!this.instance._isOpen) {
+ this.instance._setMenuHeight(true);
+ }
// cache input values for searching
this.updateCache();
// Change the normal _toggleChecked fxn behavior so that when checkAll/uncheckAll
- // is fired, only the currently displayed filtered inputs are checked
- var $instance = this.instance;
- $instance._oldToggleChecked = $instance._toggleChecked;
- $instance._toggleChecked = function(flag, group) {
- $instance._oldToggleChecked(flag, group, true);
+ // is fired, only the currently displayed filtered inputs are checked if filter entered.
+ var instance = this.instance,
+ filter = this.$input[0];
+ instance._oldToggleChecked = instance._toggleChecked;
+ instance._toggleChecked = function(flag, group) {
+ instance._oldToggleChecked(flag, group, !!filter.value);
};
},
- // thx for the logic here ben alman
+ /**
+ * Handles searches as text is entered in the filter box.
+ * Uses a text cache to speed up searching.
+ * Debouncing is done to limit how often this is ran.
+ * Alternate filter rules can be used.
+ * Option group labels may be searched, also.
+ * @param (object) event object from original event.
+ */
_handler: function(e) {
- var term = $.trim(this.$input[0].value.toLowerCase()),
-
- // speed up lookups
- $rows = this.$rows, $inputs = this.$inputs, $cache = this.$cache;
- var $groups = this.instance.$menu.find(".ui-multiselect-optgroup");
- $groups.show();
- $rows.toggle(!term);
- if(term) {
- var regex = new RegExp(term.replace(rEscape, "\\$&"), 'gi');
-
- this._trigger("filter", e, $.map($cache, function(v, i) {
- if(v.search(regex) !== -1) {
- $rows.eq(i).show();
- return $inputs.get(i);
+ var term = this.$input[0].value.toLowerCase().replace(/^\s+|\s+$/g,''),
+ filterRule = this.options.filterRule || 'contains',
+ regex = new RegExp( ( filterRules[filterRule] || filterRule ).replace('{{term}}', term.replace(rEscape, "\\$&")), 'i'),
+ searchGroups = !!this.options.searchGroups,
+ $checkboxes = this.instance.$checkboxes,
+ cache = this.cache, // Cached text() object
+ optgroupClass = "ui-multiselect-optgroup",
+ hiddenClass = 'ui-multiselect-excluded';
+
+ this.$rows.toggleClass(hiddenClass, !!term);
+ if (!searchGroups) {
+ // If not searching in groups then show all group headings in the results.
+ $checkboxes.find('.' + optgroupClass).removeClass(hiddenClass);
+ }
+ var filteredInputs = $checkboxes.children().map(function(x) {
+ var $this = $(this),
+ $groupItems = $this,
+ groupShown = !searchGroups;
+
+ // Account for optgroups
+ // If we are searching in option group labels and we match an optgroup label,
+ // then show all its children and return all its inputs also.
+ if ($this.hasClass(optgroupClass)) {
+ var $groupItems = $this.find('li');
+ if (searchGroups && regex.test( cache[x] ) ) {
+ $this.removeClass(hiddenClass);
+ $groupItems.removeClass(hiddenClass);
+ return $groupItems.find('input').get();
}
+ }
+ return $groupItems.map(function(y) {
+ var $listItem = $(this);
+ if ( regex.test( cache[x + '.' + y] ) ) {
+ // Show the opt group heading if needed
+ if (!groupShown) {
+ $this.removeClass(hiddenClass);
+ groupShown = true;
+ }
+ $listItem.removeClass(hiddenClass);
+ return this.getElementsByTagName('input')[0];
+ }
return null;
- }));
- }
+ });
- // show/hide optgroups
- $groups.each(function() {
- var $this = $(this);
- if (!$this.find('li').filter(':visible').length)
- $this.hide();
});
- this.instance._setMenuHeight();
+ if (term) {
+ this._trigger('filter', e, filteredInputs);
+ }
+ this.instance._setMenuHeight(true); // Review this.
+ return;
},
_reset: function() {
this.$input.val('').trigger('input', '');
},
- updateCache: function() {
- // each list item
- this.$rows = this.instance.$labels.parent();
-
- // cache
- this.$cache = this.element.children().map(function() {
- var $element = $(this);
-
- // account for optgroups
- if(this.tagName.toLowerCase() === "optgroup") {
- $element = $element.children();
- }
-
- return $element.map(function() {
- return this.innerHTML.toLowerCase();
- }).get();
- }).get();
+ /**
+ * Creates a text cache object from the widget options' text.
+ * @param (boolean) alsoRefresh causes the displayed search results to refresh.
+ */
+ updateCache: function(alsoRefresh) {
+ var cache = {}; // keys are like 0, 0.1, 1, 1.0, 1.1 etc.
+ this.instance.$checkboxes.children().each(function(x) {
+ var $element = $(this);
+ // Account for optgroups
+ if ($element.hasClass('ui-multiselect-optgroup')) {
+ // Single number keys are the option labels
+ cache[x] = $element.children('a').text();
+ $element = $element.find('li');
+ }
+ $element.each(function(y) {
+ cache[x + '.' + y] = $(this).text();
+ });
+ });
+ this.cache = cache;
+ this.$rows = this.instance.$checkboxes.find('li');
+ if (!!alsoRefresh) {
+ this._handler();
+ }
},
+ /**
+ * Returns the input wrapper div
+ */
widget: function() {
return this.$wrapper;
},
+ /**
+ * Destroys this widget
+ */
destroy: function() {
$.Widget.prototype.destroy.call(this);
this.$input.val('').trigger("keyup");
+ this.instance.$menu.find('.ui-multiselect-header').removeClass('ui-multiselect-hasfilter');
this.$wrapper.remove();
}
});
From bc711d204d038d9e4459552943a6ee59227a91cd Mon Sep 17 00:00:00 2001
From: Steve James <4stevejames@gmail.com>
Date: Sun, 25 Feb 2018 00:58:00 -0800
Subject: [PATCH 4/9] Fix formatting
---
src/jquery.multiselect.filter.js | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/jquery.multiselect.filter.js b/src/jquery.multiselect.filter.js
index c7cd410..11cf5d8 100644
--- a/src/jquery.multiselect.filter.js
+++ b/src/jquery.multiselect.filter.js
@@ -51,12 +51,12 @@
$.widget('ech.multiselectfilter', {
options: {
- label: 'Filter:', // (string) The label to show with the input
+ label: 'Filter:', // (string) The label to show with the input
placeholder: 'Enter keywords', // (string) The placeholder text to show in the input
- filterRule: 'contains', // (string) Either a named filter rule from above or a regular expression containing {{term}} as a placeholder
+ filterRule: 'contains', // (string) Either a named filter rule from above or a regular expression containing {{term}} as a placeholder
searchGroups: false, // (true | false) If true, search option group labels and show an entire group on a match.
- autoReset: false, // (true | false) If true, clear the filter each time the widget menu is closed.
- width: null, // (number) Override default width set in css file (px). null will inherit
+ autoReset: false, // (true | false) If true, clear the filter each time the widget menu is closed.
+ width: null, // (number) Override default width set in css file (px). null will inherit
debounceMS: 250 // (number) Number of milleseconds to wait between running the search handler.
},
From 5286ae1a547bf1f77005aff867f1680133b3ef67 Mon Sep 17 00:00:00 2001
From: Steve James <4stevejames@gmail.com>
Date: Sun, 25 Feb 2018 22:13:26 -0800
Subject: [PATCH 5/9] Omitted a break statement
---
src/jquery.multiselect.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/jquery.multiselect.js b/src/jquery.multiselect.js
index 507c313..b28293a 100644
--- a/src/jquery.multiselect.js
+++ b/src/jquery.multiselect.js
@@ -627,6 +627,7 @@
}
else if (e.which === 38) { // up for multiple select
self.close();
+ break;
}
// down for multiple select falls through
case 39: // right
From 7f7f3e59bd6d700da302b4c392ce9c264c034f6b Mon Sep 17 00:00:00 2001
From: Steve James <4stevejames@gmail.com>
Date: Mon, 26 Feb 2018 22:34:30 -0800
Subject: [PATCH 6/9] No array.indexOf() & simplify btn keypress handler
---
src/jquery.multiselect.js | 70 +++++++++++++++++++--------------------
1 file changed, 34 insertions(+), 36 deletions(-)
diff --git a/src/jquery.multiselect.js b/src/jquery.multiselect.js
index b28293a..6d863b9 100644
--- a/src/jquery.multiselect.js
+++ b/src/jquery.multiselect.js
@@ -213,7 +213,7 @@
.split(',');
for (var x = 0, len = headerLinks.length; x < len; x++) {
if (headerLinks[x] && headerLinks[x] in this.linkInfo
- && ['open', 'close', 'collapse', 'expand'].indexOf( headerLinks[x] ) == -1 ) {
+ && !( headerLinks[x] in {'open':1, 'close':1, 'collapse':1, 'expand':1} ) ) {
headerLinksHTML += _linkHTML(hdrLinkTemplate, headerLinks[x]).replace(/<\/span/ig, '');
}
}
@@ -599,41 +599,39 @@
.on({
click: clickHandler,
keydown: function(e) {
- switch(e.which) {
- case 27: // esc
- case 37: // left
- self.close();
- break;
- case 38: // up
- case 40: // down
- // Change selection via up/down on a closed single select.
- if (!self._isOpen && !self.element[0].multiple) {
- var prev, current = null, next = null;
- self.$inputs.each( function() {
- prev = current;
- current = next;
- next = this;
- if (current !== null && current.checked) {
- return false;
- }
- });
- if (e.which === 38 && prev !== null) {
- $(prev).trigger('click');
- }
- else if (e.which === 40 && !next.checked) {
- $(next).trigger('click');
- }
- break;
- }
- else if (e.which === 38) { // up for multiple select
- self.close();
- break;
- }
- // down for multiple select falls through
- case 39: // right
- self.open();
- break;
- }
+ // Change selection via up/down on a closed single select.
+ if (!self._isOpen && !self.element[0].multiple && e.which in {38:1, 40:1} ) { // up & down keys
+ var prev,
+ current = null,
+ next = null;
+ self.$inputs.each( function() {
+ prev = current;
+ current = next;
+ next = this;
+ if (current !== null && current.checked) {
+ return false;
+ }
+ });
+ if (e.which === 38 && prev !== null) {
+ $(prev).trigger('click');
+ }
+ else if (e.which === 40 && !next.checked) {
+ $(next).trigger('click');
+ }
+ }
+ else {
+ switch(e.which) {
+ case 27: // esc
+ case 37: // left
+ case 38: // up
+ self.close();
+ break;
+ case 40: // down
+ case 39: // right
+ self.open();
+ break;
+ }
+ }
},
mouseenter: function() {
if (!$button.hasClass('ui-state-disabled')) {
From c349112255f4b5700e7372ae2d2457472018f7d5 Mon Sep 17 00:00:00 2001
From: Steve James <4stevejames@gmail.com>
Date: Sun, 4 Mar 2018 18:35:54 -0800
Subject: [PATCH 7/9] Requested changes
1. Make optgroup clicks function on the optgroups regardless of collapsed status. However, filtered status is still observed for excluding from clicks.
2. Fixed issue of filter not working in dialogs. Apparently, widget instance() method is no longer supported, per StackOverflow thread. Using .data('ech-multiselect') to fetch the instance now--this works w/ the dialog.
3. When filtering, now hide optgroup headings unless a match on children li's or optgroup heading (if searching optgroup headings option set)
4. Formatting tweaks.
5. Switch to using arrays for list items in options... e.g. header option to specify displayed links in desired order.
6. As IE10+ is IE minimum, switched to using array.indexOf() for array lookups and classList where appropriate.
7. Ditched NOT USED in linkDefaults object.
8. Made _linkHTML() an internal method function.
9. Implemented classes for the optgroup collapse button and the optgroup label anchor.
10. Fixed resync. find('option') not find('options')
11. Fixed destroy. '.' prefix on namespace is not optional for .off() (document listeners issue)
12. Moved single select button up/down code to separate method and simplified that code.
13. Changed bindMenuEvents to bindCheckboxEvents
---
css/jquery.multiselect.css | 4 +-
demos/headers.htm | 8 +-
demos/single.htm | 2 +-
src/jquery.multiselect.filter.js | 40 +++--
src/jquery.multiselect.js | 284 ++++++++++++++++---------------
tests/unit/options.js | 19 ++-
6 files changed, 179 insertions(+), 178 deletions(-)
diff --git a/css/jquery.multiselect.css b/css/jquery.multiselect.css
index ab31790..b9dc305 100644
--- a/css/jquery.multiselect.css
+++ b/css/jquery.multiselect.css
@@ -17,10 +17,10 @@
.ui-multiselect-checkboxes label { border:1px solid transparent; cursor:default; display:block; padding:3px 1px;}
.ui-multiselect-checkboxes input { position:relative; top:1px; cursor: pointer;}
.ui-multiselect-checkboxes img { height: 30px; vertical-align: middle; margin-right: 3px;}
-.ui-multiselect-optgroup > button { padding: 0 1px; margin: 0;}
-.ui-multiselect-optgroup > a { border-bottom:1px solid; cursor: pointer; display:block; font-weight:bold; margin:1px 0; padding:3px; text-align:center; text-decoration:none; }
+.ui-multiselect-grouplabel { border-bottom:1px solid; cursor: pointer; display:block; font-weight:bold; margin:1px 0; padding:3px; text-align:center; text-decoration:none; }
.ui-multiselect-optgroup > ul { padding: 3px; }
.ui-multiselect-columns { display: inline-block; vertical-align: top; }
+.ui-multiselect-collapser { float: left; padding: 0 1px; margin: 0; }
.ui-multiselect-collapsed > ul { display:none }
.ui-multiselect-single .ui-multiselect-checkboxes input { left:-9999px; position:absolute !important; top: auto !important; }
diff --git a/demos/headers.htm b/demos/headers.htm
index a71a45b..4e6f66b 100644
--- a/demos/headers.htm
+++ b/demos/headers.htm
@@ -14,7 +14,7 @@
// default
$("#test-1").multiselect({
- header: 'checkAll,uncheckAll'
+ header: ['checkAll','uncheckAll']
});
// off
@@ -24,7 +24,7 @@
// custom text
$("#test-3").multiselect({
- header: "=Choose options below"
+ header: "Choose options below"
});
});
@@ -37,7 +37,7 @@ Headers
The header option can be used in three ways: