Filter on data and disabled options on moveAll and removeAll

README.md

@@ -60,6 +60,7 @@ When calling `$("#element").bootstrapDualListbox()` you can pass a parameters ob
 - `infoTextFiltered`, defaults to `'<span class="label label-warning">Filtered</span> {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:
 

demo/index.html

@@ -68,14 +68,15 @@ <h2>Example with custom settings</h2>
   nonSelectedListLabel: 'Non-selected',
   selectedListLabel: 'Selected',
   preserveSelectionOnMove: 'moved',
-  moveOnSelect: false,
-  nonSelectedFilter: 'ion ([7-9]|[1][0-2])'
+  moveOnSelect: true,
+  nonSelectedFilter: 'ion ([7-9]|[1][0-2])',
+  filterOnData: true
 });</pre>
     </div>
     <div class="col-md-7">
       <select multiple="multiple" size="10" name="duallistbox_demo2" class="demo2">
-        <option value="option1">Option 1</option>
-        <option value="option2">Option 2</option>
+        <option value="option1" data-filter-example="test 1">Option 1</option>
+        <option value="option2" data-filter-example2="test 1" disabled>Option 2</option>
         <option value="option3" selected="selected">Option 3</option>
         <option value="option4">Option 4</option>
         <option value="option5">Option 5</option>
@@ -100,8 +101,9 @@ <h2>Example with custom settings</h2>
           nonSelectedListLabel: 'Non-selected',
           selectedListLabel: 'Selected',
           preserveSelectionOnMove: 'moved',
-          moveOnSelect: false,
-          nonSelectedFilter: 'ion ([7-9]|[1][0-2])'
+          moveOnSelect: true,
+          nonSelectedFilter: 'ion ([7-9]|[1][0-2])',
+          filterOnData: true
         });
       </script>
     </div>
@@ -234,6 +236,10 @@ <h2>Settings</h2>
         <td><code>filterOnValues</code></td>
         <td><code><strong>false</strong></code>: set this to <code>true</code> to filter the options according to their values and not their HTML contents.</td>
       </tr>
+      <tr>
+        <td><code>filterOnData</code></td>
+        <td><code><strong>false</strong></code>: set this to <code>true</code> to filter the <code>data-filter-*'s</code> you assign on options.</td>
+      </tr>
       <tr>
         <td><code>eventMoveOverride</code></td>
         <td><code><strong>false</strong></code>: set this to <code>true</code> to allow your own implementation of the move event.</td>
@@ -368,6 +374,10 @@ <h2>Methods</h2>
         <td><code>setFilterOnValues(value, refresh)</code></td>
         <td>change the <code>filterOnValues</code> parameter.</td>
       </tr>
+      <tr>
+        <td><code>setFilterOnData(value, refresh)</code></td>
+        <td>change the <code>filterOnData</code> parameter.</td>
+      </tr>
       <tr>
         <td><code>setEventMoveOverride(value, refresh)</code></td>
         <td>change the <code>eventMoveOverride</code> parameter.</td>

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) {