When attempting to create a custom data adapter for a select2 combo box, what is causing “Uncaught TypeError baseName split is not a function”?

问题

I would like to use a select2 combobox with pagination for a local data array (no ajax call). To that end I'm looking at custom DataAdapter. The code to initialise the custom adapter fails.

I've tried creating a custom data adapter similar to this answer.

When adding the custom data adapter to the select2 object

$.fn.select2.amd.require(
        'select2/data/customAdapter', ['select2/data/array', 'select2/utils']

I get this error (in chrome and firefox)

jquery-3.4.1.js:3850 Uncaught TypeError: baseName.split is not a function
    at normalize (select2.js:80)
    at makeMap (select2.js:275)
    at Object.req [as require] (select2.js:394)
    at HTMLDocument.<anonymous> (index.html:30)
    at mightThrow (jquery-3.4.1.js:3557)
    at process (jquery-3.4.1.js:3625)

In edge the error is

Object doesn't support property or method 'split'

and this warning (chrome, firefox, edge)

jquery-3.4.1.js:3841 jQuery.Deferred exception: baseName.split is not a function TypeError: baseName.split is not a function
    at normalize (file:///C:/code/select2/customdata/js/select2.js:80:46)
    at makeMap (file:///C:/code/select2/customdata/js/select2.js:275:20)
    at Object.req [as require] (file:///C:/code/select2/customdata/js/select2.js:394:28)
    at HTMLDocument.<anonymous> (file:///C:/code/select2/customdata/index.html:30:24)
    at mightThrow (file:///C:/code/select2/customdata/js/jquery-3.4.1.js:3557:29)
    at process (file:///C:/code/select2/customdata/js/jquery-3.4.1.js:3625:12) undefined

I thought it was related to the jquery version. I've tried with the jquery 3.4.1 and jquery 2.2.4. Version 2.2.4 does not have the warning only the error.

My gut feeling it is related to amd.require.

Can any please help?

Here is my sample

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select2 With Custom Data Adapter</title>
  <link href="./css/select2.min.css" rel="stylesheet" />
</head>
<body>

  <select class="dropdownbox" name="state">
    <option value="abc">abc</option>
    <option value="def">ghi</option>
    <option value="ghi">ghi</option>
    <option value="jkl">jkl</option>
  </select>

  <script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
  <script type="text/javascript" src="./js/select2.js"></script>

  <script>

    $(document).ready(function () {

      //$.fn.select2.defaults.set('amdBase', 'select2/');

      console.log("before");
      $.fn.select2.amd.require(
        'select2/data/customAdapter', ['select2/data/array', 'select2/utils'],
        function (ArrayData, Utils) {
          function CustomDataAdapter($element, options) {
            CustomDataAdapter.__super__.constructor.call(this, $element, options);
          }

          Utils.Extend(CustomDataAdapter, ArrayData);

          CustomDataAdapter.prototype.current = function (callback) {
            console.log("current");
          };

          CustomDataAdapter.prototype.query = function (params, callback) {
            console.log("query");
          };

          return CustomDataAdapter;

        });
      console.log("after");


      var customAdapter = $.fn.select2.amd.require('select2/data/customAdapter');


      $('.dropdownbox').select2({
        dataAdapter: customAdapter
      });
    });
  </script>  
</body>  
</html>

Versions

select2: 4.0.7 (I cannot use one of the older select2 version with the query option).
jquery: 3.4.1

回答1:

Just a guess but should it not be something like this?

$.fn.select2.amd.require(
  'select2/data/customAdapter',
  function(customAdapter) {
    $('.dropdownbox').select2({
      dataAdapter: customAdapter,
    });
  }
);

Or load all extra modules at once:

$.fn.select2.amd.require(
  [
    'select2/data/customAdapter',
    'select2/data/array',
    'select2/utils',
  ],
  function(customAdapter, ArrayData, Utils) {
    $('.dropdownbox').select2({
      dataAdapter: customAdapter,
    });
    function CustomDataAdapter($element, options) {
      CustomDataAdapter.__super__.constructor.call(
        this,
        $element,
        options
      );
    }
    //rest of the code

回答2:

Typo.

It's meant to be define instead of require.

$.fn.select2.amd.define(
    'select2/data/customAdapter', ['select2/data/array', 'select2/utils']

After looking at this question on the select2 forum and the sample code

So here is the working sample (similar to the sample code in the link)

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select2 With Custom Data Adapter</title>
  <link href="./css/select2.min.css" rel="stylesheet" />
</head>
<body>

  <select id="dropdownboxid">
    <option value="abc">abc</option>
    <option value="def">ghi</option>
    <option value="ghi">ghi</option>
    <option value="jkl">jkl</option>
  </select>

  <script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
  <script type="text/javascript" src="./js/select2.js"></script>
  <script>

    $(document).ready(function () {

      console.log("before");
      $.fn.select2.amd.define(
        'select2/data/customAdapter', ['select2/data/array', 'select2/utils'],
        function (ArrayData, Utils) {
          function CustomDataAdapter($element, options) {
            CustomDataAdapter.__super__.constructor.call(this, $element, options);
          }

          Utils.Extend(CustomDataAdapter, ArrayData);

          CustomDataAdapter.prototype.current = function (callback) {
            console.log("current");
          };

          CustomDataAdapter.prototype.query = function (params, callback) {
            console.log("query");
          };

          return CustomDataAdapter;

        });
      console.log("after");


      var customAdapter = $.fn.select2.amd.require('select2/data/customAdapter');


      $('#dropdownbox').select2({
        dataAdapter: customAdapter
      });

    });
  </script>
</body>
</html>

来源：https://stackoverflow.com/questions/56446920/when-attempting-to-create-a-custom-data-adapter-for-a-select2-combo-box-what-is

标签

javascript

jquery-select2-4

js-amd