不带 AMD 的 Select2 自定义 dataAdapter

Posted 2023-05-07

【中文标题】不带 AMD 的 Select2 自定义 dataAdapter

【英文标题】：Select2 custom dataAdapter without AMD

【发布时间】：2015-12-29 07:54:44

【问题描述】：

我想为 select2 创建一个自定义 dataAdapter，但我在网上看到的示例都使用 AMD。我们的项目中不使用 AMD。如何创建我的自定义 dataAdapter？实现current 和query 方法的普通对象是不够的。

【参考方案1】：

事实证明，您几乎可以完全避免使用 AMD。以下适用于 select2 版本 4.0.10：

const ArrayAdapter = $.fn.select2.amd.require("select2/data/array");

class DataAdapter extends ArrayAdapter

    constructor($element, options)
    
        super($element, options);
    

    query(params, callback)
    
        console.log("params: " + JSON.stringify(params));
    


$("#my-combo-box").select2(
    
        dataAdapter: DataAdapter
    
);

您可以访问$.fn.select2.amd.require._defined["select2/data/array"] 而不是调用amd.require()，但可能没有意义：)

【讨论】：

我多年来一直在寻找这个答案。谢谢！比我见过的任何东西都干净。

@NickBrunt 嘿伙计，你能分享一个简单的例子来说明你是如何做到这一点的吗？我正在尝试使用 Dropdown 装饰器自定义下拉内容，但遇到困难:(。提前致谢。

【参考方案2】：

Select2 有一个内置的 AMD 加载程序，用于加载插件和适配器，因此您需要使用它来构建您的自定义数据适配器。

您可以在Add decorator to data adapter in Select2 version 4.x找到自定义数据适配器的示例

您需要使用 jQuery.fn.select2.amd 中 Select2 提供的方法，而不是直接调用 define。所以像

define('something/awesome', ['select2/data/array', function (ArrayAdapter) 
  // Use the array adapter
]);

会变成

jQuery.fn.select2.amd.define('something/awesome', ['select2/data/array', function (ArrayAdapter) 
  // Use the array adapter
]);