select2 init ready

src/inputs/select2/select2.js

@@ -84,6 +84,20 @@ $(function(){
         //detect whether it is multi-valued
         this.isMultiple = this.options.select2.tags || this.options.select2.multiple;
         this.isRemote = ('ajax' in this.options.select2);
+        
+        //store function returning ID of item
+        //should be here as used inautotext for local source
+        this.idFunc = this.options.select2.id;
+        if (typeof(this.idFunc) !== "function") {
+            var idKey = this.idFunc || 'id';
+            this.idFunc = function (e) { return e[idKey]; };
+        }
+        
+        //store function that renders text in select2
+        this.formatSelection = this.options.select2.formatSelection; 
+        if (typeof(this.formatSelection) !== "function") {
+            this.formatSelection = function (e) { return e.text; };
+        }       
     };
 
     $.fn.editableutils.inherit(Constructor, $.fn.editabletypes.abstractinput);
@@ -109,10 +123,6 @@ $(function(){
                    $(this).closest('form').parent().triggerHandler('resize');
                }); 
             }
-            
-            //store function that extracs ID from element
-            this.idFunc = this.$input.data('select2').opts.id; 
-            this.formatSelection = this.$input.data('select2').opts.formatSelection; 
        },
        
        value2html: function(value, element) {
@@ -148,25 +158,28 @@ $(function(){
        }, 
        
        value2input: function(value) {
-           //for remote source .val() is not working, need to look in sourceData 
+           //for local source use data directly from source (to allow autotext)
-           if(this.isRemote) {
+           /*
-               //todo: check value for array
+           if(!this.isRemote && !this.isMultiple) {
-               var item, items;
+               var items = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc);
-               //if sourceData loaded, use it to get text for display
+               if(items.length) {
-               if(this.sourceData) {
+                   this.$input.select2('data', items[0]);
-                   items = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc);
+                   return;
-                   if(items.length) {
+               }
-                       item = items[0];
+           } 
-                   } 
+           */
-               } 
+           
-               //if item not found by sourceData, use element text (e.g. for the first show)
+           //for remote source just set value, text is updated by initSelection    
-               if(!item) {   
+           this.$input.val(value).trigger('change', true); //second argument needed to separate initial change from user's click (for autosubmit)
-                   item = {id: value, text: $(this.options.scope).text()};
+           
-               } 
+           //if remote source AND no user's initSelection provided --> try to use element's text
-               //select2('data', ...) allows to set both id and text --> usefull for initial show when items are not loaded   
+           if(this.isRemote && !this.isMultiple && !this.options.select2.initSelection) {
-               this.$input.select2('data', item).trigger('change', true); //second argument needed to separate initial change from user's click (for autosubmit)
+               var customId = this.options.select2.id,
-           } else {
+                   customText = this.options.select2.formatSelection;
-               this.$input.val(value).trigger('change', true); //second argument needed to separate initial change from user's click (for autosubmit)
+               if(!customId && !customText) {      
+                   var data = {id: value, text: $(this.options.scope).text()};
+                   this.$input.select2('data', data);    
+               }
            }
        },
        

test/unit/select2.js

@@ -8,7 +8,7 @@ $(function () {
         }
     });  
     
-     asyncTest("init-change-save (not multiple, local)", function () {
+     asyncTest("local: init-change-save (not multiple)", function () {
         var s = 2, text = 'text2',
             e = $('<a href="#" data-type="select2" data-name="select2" data-value="'+s+'"></a>').appendTo(fx).editable({
             source: [{id: 1, text: 'text1'}, {id: s, text: text}, {id: 3, text: 'text3'}],
@@ -49,7 +49,7 @@ $(function () {
         }, timeout);
      });  
      
-     asyncTest("init-change-save (multiple, local)", function () {
+     asyncTest("local: init-change-save (multiple)", function () {
         var s = '2,3', text = 'text2, text3',
             e = $('<a href="#" data-type="select2" data-name="select2" data-value="'+s+'"></a>').appendTo(fx).editable({
             source: [{id: 1, text: 'text1'}, {id: 2, text: 'text2'}, {id: 3, text: 'text3'}],
@@ -97,7 +97,7 @@ $(function () {
         }, timeout);
      });       
    
-    asyncTest("tags (local)", function () {
+    asyncTest("local: tags", function () {
         var s = 'text2,abc', text = 'text2, abc',
             e = $('<a href="#" data-type="select2" data-name="select2">'+text+'</a>').appendTo(fx).editable({
             viewseparator: ', ',
@@ -142,7 +142,7 @@ $(function () {
         }, timeout);
      });          
     
-     test("setValue (local) + x-editable source", function () {
+     test("local: setValue + x-editable source", function () {
         var e = $('<a href="#" data-type="select2" data-name="select2" data-value="1">test2</a>').appendTo('#qunit-fixture').editable({
                source: [{value: 1, text: 'text1'}, {value: 2, text: 'text2'}, {value: 3, text: 'text3'}]
             });
@@ -166,12 +166,12 @@ $(function () {
         equal(e.text(), 'text3', 'text ok');
      }); 
   
-    asyncTest("init-change-save (not multiple, remote)", function () {
+    asyncTest("remote: init-change-save, just url (not multiple)", function () {
         var s = 2, text = groups[s],
             newVal = 0, newText = groups[newVal],
             e = $('<a href="#" data-type="select2" data-name="select2" data-value="'+s+'">'+text+'</a>').appendTo(fx).editable({
-            source: 'groupsArr2'
+                source: 'groupsArr2'
-        });
+            });
         
         e.click();
         var p = tip(e);
@@ -221,4 +221,113 @@ $(function () {
         }, timeout);             
      });    
     
+    asyncTest("remote: custom id, custom text, init selection (not multiple)", function () {
+        var s = 2,
+            data = [
+            {cid: 1, name: '111'},
+            {cid: 2, name: '222'}
+            ],
+            idIndex, 
+            text = '222', req = 0,
+            newVal = 0, newText = groups[newVal],
+            e = $('<a href="#" data-type="select2" data-name="select2" data-value="'+s+'">'+text+'</a>').appendTo(fx).editable({
+                pk: 1,
+                select2: {
+                   minimumInputLength: 1,
+                   id: function (e) {
+                       return e.cid;
+                   },
+                   ajax: {
+                       url: '/select2list',
+                       dataType: 'json',
+                       data: function (term, page) {
+                           return { query: term };
+                       },
+                       results: function (data, page) {
+                           return { results: data };
+                       }
+                   },
+                   formatResult: function (e) {
+                       return e.name;
+                   },
+                   formatSelection: function (e) {
+                       return e.name;
+                   },
+                   initSelection: function (element, callback) {
+                       return $.get('/select2id', { query: element.val() }, function (data) {
+                           callback(data);
+                       }, 'json');
+                   }     
+                }
+            });
+        
+       //mocks
+       $.mockjax({
+           url: '/select2list',
+           responseTime: 50,
+           response: function() {
+               req++;
+               this.responseText = data;
+           }
+       }); 
+       
+       $.mockjax({
+           url: '/select2id',
+           responseTime: 50,
+           response: function() {
+               req++;
+               this.responseText = data[idIndex];
+           }
+       });       
+        
+        //start
+        idIndex = 1;
+        e.click();
+        var p = tip(e);
+        
+        ok(p.is(':visible'), 'popover visible');
+        
+        //waiting for initSelection
+        setTimeout(function() {
+            equal(p.find('.select2-choice span').text(), text, 'selected text correct'); 
+            equal(req, 1, '1 request ok'); 
+            
+            //enter 1 symbol
+            p.find('.select2-choice').mousedown();
+            $('.select2-search .select2-input:visible').val('1').trigger('keyup-change');
+            
+            //wait for list loading
+            setTimeout(function() {
+               equal($('.select2-results li').length, data.length, 'items loaded');
+               equal($('.select2-results .select2-highlighted > .select2-result-label').text(), data[0].name, 'highlight ok');
+      
+               //click on first
+               var newVal = 1, newText = '111';
+               $('.select2-results li').eq(0).mouseup();
+               equal(p.find('.select2-choice span').text(), data[0].name, 'new selected text ok');
+                           
+               //submit
+               p.find('form').submit();
+               
+               setTimeout(function() {
+                   ok(!p.is(':visible'), 'popover closed');
+                   equal(e.data('editable').value, newVal, 'new value ok');
+                   equal(e.text(), newText, 'new text ok');             
+
+                   //open again
+                   idIndex = 0;
+                   e.click();
+                   setTimeout(function() {
+                       p = tip(e);
+                       var $input = p.find('input[type="hidden"]');
+                       equal(p.find('.select2-choice span').text(), newText, 'text ok on second open');
+                       equal($input.val(), newVal, 'selected value ok on second open');                
+                   
+                       e.remove();
+                       start();
+                   }, timeout);
+               }, timeout);
+            }, timeout);    
+        }, timeout);
+   });        
 });