From 2df60d423d3364721d9b7f0d2147072b7f06a5f4 Mon Sep 17 00:00:00 2001 From: Alexandre Zaminato Gueleres Date: Mon, 25 Apr 2016 09:40:26 -0300 Subject: [PATCH 1/3] Added filter-on-data feature, and modified addAll and removeAll behavior, to not pass disabled options. --- README.md | 2 ++ src/jquery.bootstrap-duallistbox.js | 29 ++++++++++++++++++++++++++--- 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 74ce46e..1716d75 100644 --- a/README.md +++ b/README.md @@ -60,6 +60,7 @@ When calling `$("#element").bootstrapDualListbox()` you can pass a parameters ob - `infoTextFiltered`, defaults to `'Filtered {0} from {1}'`, determines which element format to use when some element is filtered. Remember to insert the `{0}` and `{1} `placeholders. - `infoTextEmpty`, defaults to `'Empty list'`, determines the `string` to use when there are no options in the list. - `filterOnValues`, defaults to `false`, set this to `true` to filter the `option`s according to their `value`s and not their HTML contents. +- `filterOnData`, defaults to `false`, set this to `true` to filter the `data-filter-*`s you assign on options. ### Methods @@ -95,6 +96,7 @@ Here are the available methods: - `setInfoTextFiltered(value, refresh)` to change the `infoTextFiltered` parameter. - `setInfoTextEmpty(value, refresh)` to change the `infoTextEmpty` parameter. - `setFilterOnValues(value, refresh)` to change the `filterOnValues` parameter. +- `setFilterOnData(value, refresh)` to change the `filterOnData` parameter. Furthermore, you can call: diff --git a/src/jquery.bootstrap-duallistbox.js b/src/jquery.bootstrap-duallistbox.js index d94d4ae..de7c67c 100644 --- a/src/jquery.bootstrap-duallistbox.js +++ b/src/jquery.bootstrap-duallistbox.js @@ -23,6 +23,7 @@ infoTextEmpty: 'Empty list', // when there are no options present in the list filterOnValues: false, // filter by selector's values, boolean sortByInputOrder: false, + filterOnData: false, // filter by data-filter-*, boolean eventMoveOverride: false, // boolean, allows user to unbind default event behaviour and run their own instead eventMoveAllOverride: false, // boolean, allows user to unbind default event behaviour and run their own instead eventRemoveOverride: false, // boolean, allows user to unbind default event behaviour and run their own instead @@ -160,7 +161,7 @@ options.each(function(index, item) { var $item = $(item), isFiltered = true; - if (item.text.match(regex) || (dualListbox.settings.filterOnValues && $item.attr('value').match(regex) ) ) { + if (item.text.match(regex) || (dualListbox.settings.filterOnValues && $item.attr('value').match(regex)) || (dualListbox.settings.filterOnData && hasFilterOnData($item, regex))) { isFiltered = false; dualListbox.elements['select'+selectIndex].append($item.clone(true).prop('selected', $item.data('_selected'))); } @@ -178,6 +179,20 @@ }); } + function hasFilterOnData(item, regex) { + var $item = $(item), + isFiltered = false; + if ($item) { + $.each($item.data(), function(key, value) { + if (key.match(/filter([A-Z]+)+/) && value && value.toString().match(regex)) { + isFiltered = true; + return false; + } + }); + } + return isFiltered; + } + function sortOptionsByInputOrder(select){ var selectopt = select.children('option'); @@ -263,7 +278,7 @@ dualListbox.element.find('option').each(function(index, item) { var $item = $(item); - if (!$item.data('filtered1')) { + if (!$item.data('filtered1') && !$item.prop('disabled')) { $item.prop('selected', true); $item.attr('data-sortindex', dualListbox.sortIndex); dualListbox.sortIndex++; @@ -284,7 +299,7 @@ dualListbox.element.find('option').each(function(index, item) { var $item = $(item); - if (!$item.data('filtered2')) { + if (!$item.data('filtered2') && !$item.prop('disabled')) { $item.prop('selected', false); $item.removeAttr('data-sortindex'); } @@ -453,6 +468,7 @@ this.setInfoTextEmpty(this.settings.infoTextEmpty); this.setFilterOnValues(this.settings.filterOnValues); this.setSortByInputOrder(this.settings.sortByInputOrder); + this.setFilterOnData(this.settings.filterOnData); this.setEventMoveOverride(this.settings.eventMoveOverride); this.setEventMoveAllOverride(this.settings.eventMoveAllOverride); this.setEventRemoveOverride(this.settings.eventRemoveOverride); @@ -698,6 +714,13 @@ } return this.element; }, + setFilterOnData: function(value, refresh) { + this.settings.filterOnData = value; + if (refresh) { + refreshSelects(this); + } + return this.element; + }, setEventMoveOverride: function(value, refresh) { this.settings.eventMoveOverride = value; if (refresh) { From d26a1aeaac84297a83c870b6ab738812393b08fd Mon Sep 17 00:00:00 2001 From: Alexandre Zaminato Gueleres Date: Mon, 25 Apr 2016 09:52:26 -0300 Subject: [PATCH 2/3] added demo of filter-on-data --- demo/index.html | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/demo/index.html b/demo/index.html index e15e78c..8d46c30 100644 --- a/demo/index.html +++ b/demo/index.html @@ -69,13 +69,14 @@

Example with custom settings

selectedListLabel: 'Selected', preserveSelectionOnMove: 'moved', moveOnSelect: false, - nonSelectedFilter: 'ion ([7-9]|[1][0-2])' + nonSelectedFilter: 'ion ([7-9]|[1][0-2])', + filterOnData: true });
- + @@ -101,7 +101,7 @@

Example with custom settings

nonSelectedListLabel: 'Non-selected', selectedListLabel: 'Selected', preserveSelectionOnMove: 'moved', - moveOnSelect: false, + moveOnSelect: true, nonSelectedFilter: 'ion ([7-9]|[1][0-2])', filterOnData: true });