diff --git a/src/inputs/select2/select2.js b/src/inputs/select2/select2.js
index 3ddaa2b..f73a601 100644
--- a/src/inputs/select2/select2.js
+++ b/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
- if(this.isRemote) {
- //todo: check value for array
- var item, items;
- //if sourceData loaded, use it to get text for display
- if(this.sourceData) {
- items = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc);
- if(items.length) {
- item = items[0];
- }
- }
- //if item not found by sourceData, use element text (e.g. for the first show)
- if(!item) {
- item = {id: value, text: $(this.options.scope).text()};
- }
- //select2('data', ...) allows to set both id and text --> usefull for initial show when items are not loaded
- this.$input.select2('data', item).trigger('change', true); //second argument needed to separate initial change from user's click (for autosubmit)
- } else {
- this.$input.val(value).trigger('change', true); //second argument needed to separate initial change from user's click (for autosubmit)
+ //for local source use data directly from source (to allow autotext)
+ /*
+ if(!this.isRemote && !this.isMultiple) {
+ var items = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc);
+ if(items.length) {
+ this.$input.select2('data', items[0]);
+ return;
+ }
+ }
+ */
+
+ //for remote source just set value, text is updated by initSelection
+ this.$input.val(value).trigger('change', true); //second argument needed to separate initial change from user's click (for autosubmit)
+
+ //if remote source AND no user's initSelection provided --> try to use element's text
+ if(this.isRemote && !this.isMultiple && !this.options.select2.initSelection) {
+ var customId = this.options.select2.id,
+ customText = this.options.select2.formatSelection;
+ if(!customId && !customText) {
+ var data = {id: value, text: $(this.options.scope).text()};
+ this.$input.select2('data', data);
+ }
}
},
diff --git a/test/unit/select2.js b/test/unit/select2.js
index 053298a..e153dee 100644
--- a/test/unit/select2.js
+++ b/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);
+ });
});
\ No newline at end of file