Select2 4 custom data adapter
14,119
Solution 1
you define it via AMD-Pattern:
$.fn.select2.amd.define('select2/data/customAdapter',[
'select2/data/array',
'select2/utils'
],
function (ArrayAdapter, Utils) {
function CustomDataAdapter ($element, options) {
CustomDataAdapter.__super__.constructor.call(this, $element, options);
}
Utils.Extend(CustomDataAdapter, ArrayAdapter);
CustomDataAdapter.prototype.current = function (callback) {
callback(...);
};
return CustomDataAdapter;
}
);
var customAdapter=$.fn.select2.amd.require('select2/data/customAdapter');
$("#my").select2({
tags: true,
dataAdapter: customAdapter
});
Solution 2
For anyone trying to extend select2, here is an example :
// Require the adapter you want to override
$.fn.select2.amd.require(["select2/data/select"], function (Select) {
let CustomDataAdapter = Select;
// Simple example, just override the function
CustomDataAdapter.prototype.current = function (callback) {
// Your own code
};
// Example modifying data then calling the original function (which we need to keep)
let originalSelect = CustomDataAdapter.prototype.select;
CustomDataAdapter.prototype.select = function (data) {
// Your own code
// Call the original function while keeping 'this' context
originalSelect.bind(this)(data);
};
// Finally, use the custom data adapter
$('#my-select').select2({
dataAdapter: CustomDataAdapter
});
});
Author by
PowerGamer
Updated on July 18, 2022Comments
-
PowerGamer almost 2 years
I am trying to create a custom data adapter according to an example here: http://select2.github.io/announcements-4.0.html#query-to-data-adapter. How can I move the line that creates the select2 control outside the function with definition of DataAdapter (see the code below)?
<!DOCTYPE html> <head> <title></title> <link href="select2.css" rel="stylesheet" /> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js"></script> <script type="text/javascript" src="select2.full.js"></script> <script type="text/javascript"> $.fn.select2.amd.require( ['select2/data/array', 'select2/utils'], function (ArrayData, Utils) { function CustomData ($element, options) { CustomData.__super__.constructor.call(this, $element, options); } Utils.Extend(CustomData, ArrayData); CustomData.prototype.query = function (params, callback) { var data = {results: []}; data.results.push({id: params.term, text: params.term}); data.results.push({id: 11, text: 'aa'}); data.results.push({id: 22, text: 'bb'}); callback(data); }; // Works if uncommented, but this line needs to be elsewhere (in $(document).ready()). //$("#my").select2({tags: true, dataAdapter: CustomData}); }); $(document).ready(function() { // This line does not work here. $("#my").select2({tags: true, dataAdapter: CustomData}); }); </script> </head> <body> <select id="my"></select> </body> </html>
-
PowerGamer almost 9 yearsDoes not work for me, I am getting "Unable to get property 'amd' of undefined or null reference": pastebin.com/yqarRJRu
-
gunthor almost 9 yearsjust tried your code successfully in several browsers in fiddle - are you including the latest version of select2 (v4.0.0)? jsfiddle.net/hvzfmthm
-
PowerGamer almost 9 yearsI changed all urls to online hosts (pastebin.com/0F053u3j), but still get the same error in IE11.
-
gunthor almost 9 yearswell, if $.fn.select2 is null or undefined - there are probably other troubles than the amd (browser caching?) .
-
mmike over 7 yearsalso can be modified AjaxAdapter, SelectAdapter etc.
-
vladimir.gorea over 6 yearsI have absolutely no idea how this works. All this complicated construction just for doing simple custom functionality ...
-
Gael Musi over 4 yearsAfter implementing this, how do you set the select2 selected value from database for example?