尝试为 select2 组合框创建自定义数据适配器时，是啥导致“Uncaught TypeError baseName split is not a function”？

Posted

技术标签:

【中文标题】尝试为 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"?尝试为 select2 组合框创建自定义数据适配器时，是什么导致“Uncaught TypeError baseName split is not a function”？ 【发布时间】：2019-10-20 03:55:00 【问题描述】：

我想对本地数据数组使用带分页功能的 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'

还有这个警告（chr​​ome、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

【问题讨论】：

【参考方案1】：

错字。

应该是define 而不是require。

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

在 select2 论坛上查看此question 和sample code 后

所以这是工作示例（类似于链接中的示例代码）

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

【讨论】：

【参考方案2】：

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

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

【讨论】：

以上是关于尝试为 select2 组合框创建自定义数据适配器时，是啥导致“Uncaught TypeError baseName split is not a function”？的主要内容，如果未能解决你的问题，请参考以下文章

如果有 0 或 1 个项目，如何创建没有箭头的自定义 tkinter 组合框？

Select2 下拉菜单低于主下拉菜单

select2 - 用作自动完成文本框（即使不是选项）

select2 如何自定义提示信息

尝试在 mousepress 事件中使用来自另一个组合框的值加载自定义组合框

在使用ItemContainerGenerator进行自定义时，WPF ComboBox在第二次打开之前不会更新项目