itemsByValue method

CHANGELOG.txt

@@ -4,6 +4,7 @@ X-editable changelog
 
 Version 1.3.1 wip
 ---------------------------- 
+[enh] new util method `$.fn.editableutils.itemsByValue` to easily get selected items for sourced-inputs (vitalets)
 [enh] convert newlines to <br> in error message for more pretty display (vitalets)
 [enh #57] remove css height for textarea (vitalets) 
 [enh] if new value for select is 'null' source should not load (vitalets) 

src/editable-form/editable-form-utils.js

@@ -124,6 +124,28 @@
        **/
        escape: function(str) {
            return $('<div>').text(str).html();
+       },
+       
+       /*
+        returns array items from sourceData having value property equal or inArray of 'value'
+       */
+       itemsByValue: function(value, sourceData) {
+           if(!sourceData || value === null) {
+               return [];
+           }
+           
+           if(!$.isArray(value)) {
+               value = [].push(value);
+           }
+                      
+           /*jslint eqeq: true*/           
+           var result = $.grep(sourceData, function(o){
+               return $.grep(value, function(v){ return v == o.value; }).length;
+           });
+           /*jslint eqeq: false*/
+           
+           return result;
        }           
+       
     };      
 }(window.jQuery));

src/element/editable-element.js

@@ -547,10 +547,11 @@ Makes editable any HTML element on the page. Applied as jQuery method.
         value: null,
         /**
         Callback to perform custom displaying of value in element's text.  
-        If <code>null</code>, default input's value2html() will be called.  
+        If `null`, default input's value2html() will be called.  
-        If <code>false</code>, no displaying methods will be called, element's text will never change.  
+        If `false`, no displaying methods will be called, element's text will never change.  
         Runs under element's scope.  
-        Second parameter __sourceData__ is passed for inputs with source (select, checklist).
+        Second parameter __sourceData__ is passed for inputs with source (select, checklist). To get currently selected items
+        use `$.fn.editableutils.itemsByValue(value, sourceData)` function.
         
         @property display 
         @type function|boolean
@@ -558,8 +559,16 @@ Makes editable any HTML element on the page. Applied as jQuery method.
         @since 1.2.0
         @example
         display: function(value, sourceData) {
-            var escapedValue = $('<div>').text(value).html();
+           //display checklist as comma-separated values
-            $(this).html('<b>'+escapedValue+'</b>');
+           var html = [],
+               checked = $.fn.editableutils.itemsByValue(value, sourceData);
+               
+           if(checked.length) {
+               $.each(checked, function(i, v) { html.push($.fn.editableutils.escape(v.text)); });
+               $(element).html(html.join(', '));
+           } else {
+               $(element).empty(); 
+           }
         }
         **/          
         display: null

src/inputs/checklist.js

@@ -94,11 +94,8 @@ $(function(){
        //collect text of checked boxes
         value2htmlFinal: function(value, element) {
            var html = [],
-               /*jslint eqeq: true*/
+               checked = $.fn.editableutils.itemsByValue(value, this.sourceData);
-               checked = $.grep(this.sourceData, function(o){
+               
-                   return $.grep(value, function(v){ return v == o.value; }).length;
-               });
-               /*jslint eqeq: false*/
            if(checked.length) {
                $.each(checked, function(i, v) { html.push($.fn.editableutils.escape(v.text)); });
                $(element).html(html.join('<br>'));

src/inputs/list.js

@@ -236,20 +236,7 @@ List - abstract class for inputs that have source option loaded from js array or
                 });  
             }
             return result;
-        },
+        }
-        
-        //search for item by particular value
-        itemByVal: function(val) {
-            if($.isArray(this.sourceData)) {
-                for(var i=0; i<this.sourceData.length; i++){
-                    /*jshint eqeqeq: false*/
-                    if(this.sourceData[i].value == val) {
-                    /*jshint eqeqeq: true*/                            
-                        return this.sourceData[i];
-                    }
-                }
-            }
-        }        
 
     });      
 

src/inputs/select.js

@@ -47,10 +47,13 @@ $(function(){
         },
        
         value2htmlFinal: function(value, element) {
-            var text = '', item = this.itemByVal(value);
+            var text = '', 
-            if(item) {
+                items = $.fn.editableutils.itemsByValue(value, this.sourceData);
-                text = item.text;
+                
+            if(items.length) {
+                text = items[0].text;
             }
+            
             Select.superclass.constructor.superclass.value2html(text, element);   
         },
         

test/unit/select.js

@@ -609,7 +609,7 @@ $(function () {
          });  
 
         var e = $('<a href="#" data-type="select" data-pk="1" data-name="name1" data-value="1" data-url="post.php" data-source="groups-null.php">11</a>').appendTo(fx).editable(),
-        d = e.data('editable');
+            d = e.data('editable');
         
         e.editable('setValue', null);