Option 1
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.filter.js b/src/jquery.multiselect.filter.js
index c91ddf5..13b9277 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,19 +51,31 @@
$.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;
- // get the multiselect instance
- this.instance = $element.multiselect('instance');
+ // get the multiselect instance -- instance() method no longer supported -- use data()
+ this.instance = $element.multiselect().data('ech-multiselect');
// 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');
@@ -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,140 @@
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;
+ var 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,'');
+ var filterRule = this.options.filterRule || 'contains';
+ var regex = new RegExp( ( filterRules[filterRule] || filterRule ).replace('{{term}}', term.replace(rEscape, "\\$&")), 'i');
+ var searchGroups = !!this.options.searchGroups;
+ var $checkboxes = this.instance.$checkboxes;
+ var cache = this.cache; // Cached text() object
+ var optgroupClass = "ui-multiselect-optgroup";
+ var hiddenClass = 'ui-multiselect-excluded';
+
+ this.$rows.toggleClass(hiddenClass, !!term);
+ var filteredInputs = $checkboxes.children().map(function(x) {
+ var $this = $(this);
+ var $groupItems = $this;
+ var groupShown = false;
+
+ // 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);
+ }
+ if (!this.instance.options.listbox) {
+ this.instance._setMenuHeight(true);
+ }
+ 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.$input.val('').trigger("keyup").off('keydown input search');
+ this.instance.$menu.find('.ui-multiselect-header').removeClass('ui-multiselect-hasfilter');
this.$wrapper.remove();
}
});
diff --git a/src/jquery.multiselect.js b/src/jquery.multiselect.js
index 92b863b..a177ec7 100644
--- a/src/jquery.multiselect.js
+++ b/src/jquery.multiselect.js
@@ -19,46 +19,89 @@
(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
+ if (!options.listbox) {
+ // The button that opens the widget menu. Note that this is inserted later below.
+ var $button = ( this.$button = $( document.createElement('button') ) )
+ .addClass('ui-multiselect ui-widget ui-state-default ui-corner-all'
+ + (wrapText.indexOf('button') > -1 ? '' : ' ui-multiselect-nowrap' )
+ + (classes ? ' ' + classes : '')
+ )
+ .attr({
+ 'type': 'button',
+ 'title': elSelect.title,
+ 'tabIndex': elSelect.tabIndex,
+ 'id': elSelect.id ? elSelect.id + '_ms' : null
+ })
+ .prop('aria-haspopup', true)
+ .html( this._linkHTML('{{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 = ( headerOn === true
- ? (checkAllText === null ? '' : ' ' + iconSet.checkAll + (checkAllText ? '' + checkAllText + ' ' : '' ) + ' ' + iconSet.uncheckAll + (uncheckAllText ? '' + uncheckAllText + ' ' : '' ) + ' ' + iconSet.flipAll + '' + (flipAllText ? '' + flipAllText + ' ' : '' ) + ' ' + headerOn + ' ' : '') );
+ var headerLinksHTML = '';
+ if (!options.header) {} // no-op for no header
+ else if (typeof options.header === 'string') {
+ headerLinksHTML = '' + options.header + ' ';
+ }
+ else if (options.header.constructor == Array) {
+ for (var x = 0, len = options.header.length; x < len; x++) {
+ var linkInfoKey = options.header[x];
+ if ( linkInfoKey && linkInfoKey in this.linkInfo
+ && !(options.maxSelected && linkInfoKey === 'checkAll')
+ && ['open','close','collapse','expand'].indexOf(linkInfoKey) === -1 ) {
+ headerLinksHTML += this._linkHTML('{{icon}}{{text}} '
- + iconSet.close
- + ' {{icon}} 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..cbbe154 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: ',