尝试为 select2 组合框创建自定义数据适配器时，导致 "Uncaught TypeError baseName split is not a function" 的原因是什么？

Question

我想对本地数据数组使用带分页的 select2 组合框（无 ajax 调用）。为此，我正在查看 custom DataAdapter。初始化自定义适配器的代码失败。

我试过创建一个类似于此的自定义数据适配器 answer。

将自定义数据适配器添加到 select2 对象时

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

我收到此错误（在 chrome 和 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)

边缘错误是

Object doesn't support property or method 'split'

和这个警告（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

我以为和jquery版本有关。我试过 jquery 3.4.1 和 jquery 2.2.4。版本 2.2.4 没有警告只有错误。

我的直觉与 amd.require 有关。

有什么可以帮忙的吗？

这是我的样本

<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>

版本

select2: 4.0.7（我不能使用带有查询选项的旧 select2 版本之一）。
jquery: 3.4.1

Answer 1

只是猜测，但应该不是这样的吧？

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

或者一次加载所有额外模块：

$.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

Answer 2

打字错误。

应该是 define 而不是 require。

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

看完这个question on the select2 forum and the sample code

这是工作示例（类似于 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>

尝试为 select2 组合框创建自定义数据适配器时，导致 "Uncaught TypeError baseName split is not a function" 的原因是什么？

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

javascript

jquery-select2-4

js-amd