尝试为select2组合框创建自定义数据适配器时,导致“Uncaught TypeError baseName split is is 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"?

查看:212
本文介绍了尝试为select2组合框创建自定义数据适配器时,导致“Uncaught TypeError baseName split is is a function”的原因是什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想使用带有分页的select2组合框用于本地数据阵列(没有ajax调用)。为此,我正在考虑自定义DataAdapter 。初始化自定义适配器的代码失败。

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.

我尝试过创建类似于回答的自定义数据适配器

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

When adding the custom data adapter to the select2 object

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

我收到此错误(在chrome和firefox中)

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)

在边缘错误是

Object doesn't support property or method 'split'

和thi警告(chr​​ome,firefox,edge)

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

我认为它与jquery版本有关。我尝试过使用jquery 3.4.1和jquery 2.2.4。版本2.2.4没有警告只有错误。

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.

我的直觉感觉它与 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

推荐答案

错字。

这意味着 define 而不是 require

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

看完问题示例代码

所以这是工作样本(类似于链接中的示例代码)

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>

这篇关于尝试为select2组合框创建自定义数据适配器时,导致“Uncaught TypeError baseName split is is a function”的原因是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆