Select2 在调用时使用动态 Ajax URL

Posted 2023-05-07

【中文标题】Select2 在调用时使用动态 Ajax URL

【英文标题】：Select2 use a dynamic Ajax URL on call

【发布时间】：2015-08-03 02:30:08

【问题描述】：

我使用带有 Ajax 的 Select2 插件 (v 3.5.2) 来动态加载列表中的元素。

我在 Select2 的初始化（在 ajax 帮助程序中设置了一个 url 属性）和进行 ajax 调用的时间之间有一个问题，这个 url 可能需要更改。

所以我有这样的东西：

$box.select2(
    containerCssClass: "form-control"
    minimumInputLength: 0,
    allowClear: true,
    ajax: 
       url: someUrl,
       dataType: 'json',
       quietMillis: 100,
...

我不知道在启动之前如何、何时、在何处更改 ajax.url 值。

Select2 的帮助说：

Select2 默认使用 jQuery 的$.ajax 函数来执行远程调用。可以在ajax 设置中指定替代的transport 函数，或者可以通过提供自定义query 函数而不是使用ajax 帮助器来构建完全自定义的实现。

但我找不到任何关于如何做到这一点的示例。

提前感谢您的帮助。非常感谢。

【参考方案1】：

我不知道在启动之前如何、何时、在何处更改 ajax.url 值。

ajax.url 选项可以指定为静态字符串或在 Select2 3.5.x 和 4.0.0 中返回一个的方法。

$("select").select2(
  ajax: 
    url: function () 
      return UrlHelper.RemoteAPI();
    
  
);

这对于更改 基本 URL 很有用，例如当 URL 在运行时确定或以不同的方法自动生成时。如果您需要更改查询参数，例如用于发送搜索词的参数，则需要覆盖ajax.data 选项。

$("select").select2(
  ajax: 
    data: function (args) 
      // args is the search term in 3.5.x

      // args is an object containing the query parameters in 4.0.0
      // args.term is the search term in 4.0.0
      return 
        search: args.term || args;
      ;
    
  
);

这里的数据默认作为查询参数附加，如果方法类型从GET（默认）更改为其他任何内容，将作为请求正文发送。

Select2 默认使用 jQuery 的 $.ajax 函数来执行远程调用。可以在 ajax 设置中指定替代传输函数，或者可以通过提供自定义查询函数而不是使用 ajax 帮助器来构建完全自定义的实现。

但我找不到任何关于如何做到这一点的示例。

Select2 确实允许通过更改 ajax.transport 选项来使用不同的 AJAX 传输。

在 3.5.2 中，这必须是与 $.ajax 兼容的方法，因此它必须能够获取包含 success 和 failure 回调的对象。

$("select").select2(
  ajax: 
    transport: function (args) 
      // args.success is a callback
      // args.failure is a callback

      // should return an object which has an `abort` method.
      return $.ajax(args);
    
  
);

在 4.0.0 中，这必须是一个接受 params 对象（与传递给 ajax.data 的对象相同）、success 回调和 failure 回调的方法。

$("select").select2(
  ajax: 
    transport: function (params, success, failure) 
      var $request = $.ajax(params);

      $request.then(success);
      $request.fail(failure);

      return $request;
    
  
);

【讨论】：

你救了我的命。

【参考方案2】：

处理相同的非常简单的 javascript 代码，也可以在 Suitescript(Netsuite) 中使用。

// prepare your dynamic URL inside this method and return
function getURL() 
     return url + params;


// While binding the select2 with the dropdown set url to call a anonymous function which internally calls another function.
jQuery("select.itemDropDown").select2(
    placeholder: "Select an item",
    width: "200px",
    minimumInputLength: 3,
    ajax: 
        url: function() 
            return getURL()
        ,
        dataType: 'json'
    
);

【讨论】：

那是一个不错的！ +1