Geek Answers Handbook

Choice2 4 user data adapters

I am trying to create a custom data adapter according to the example here: http://select2.imtqy.com/announcements-4.0.html#query-to-data-adapter . How to move a line that creates a select2 control outside a function with a DataAdapter definition (see 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>
+7
source share
2 answers

you define it using the 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 });
+12
source

For those 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 }); });
0
source

More articles:


All Articles