如何使用 AJAX 预加载 select2 插件？

Posted 2023-03-14

【中文标题】如何使用 AJAX 预加载 select2 插件？

【英文标题】：How to preloaded select2 plugin with AJAX?

【发布时间】：2019-09-01 00:45:35

【问题描述】：

在本例中：https://jsfiddle.net/wqd4ebyn/2/:

$(document).ready(function() 
    $('.js-example-basic-single').select2(
      
          ajax: 
          url: 'https://jsonplaceholder.typicode.com/todos',
          dataType: 'json'
          
      
    );
);

我正在尝试使用 ajax 获取远程数据并使用当前选项预加载列表。除非我删除了 ajax，否则它不起作用：

$(document).ready(function() 
    $('.js-example-basic-single').select2(
    );
);

我的清单太大了。我想要的是列出一些非常常见的选项，其余的由 ajax 列出。当前的实现确实允许两者都做，无论是静态选项还是动态。我两个都需要。

【参考方案1】：

请看官方文档：https://select2.org/data-sources/ajax 您需要有一个处理请求参数的函数和另一个处理响应数据的函数。

你试过吗？ How to use Select2 with JSON via Ajax request?

编辑： 我在这里用你的代码创建了一个 JSFIddle：https://jsfiddle.net/7bdeo38c/6/

html：

<select class="js-example-basic-single" name="state"></select>

JS：

$(document).ready(function() 
    $('.js-example-basic-single').select2(
      
        ajax: 
          url: 'https://jsonplaceholder.typicode.com/todos',
          dataType: 'json',
          data: function (params) 
            return 
              q: params.term // search term
            ;
          ,
          processResults: function (data) 
            return 
              results: data // results
            ;
          
        ,
        templateResult: formatResults, // Controls how the dropdown looks
        templateSelection: formatSelection, // Controls what is displayed after selecting an item
        escapeMarkup: function (m)  return m; , // Let our custom formatter work
      
    );
);

function formatResults (data) 
  if (data.loading) 
    return data.text;
  

  var result;
  if (data.completed) 
        result = "<div class='select2-result-repository__description'>" + data.title + "</div>";
  
  return result;


function formatSelection (data) 
  return data.id + ' - ' + data.title || data.text;

Select2 官方文档中有一个类似的示例。有关 GitHub 存储库示例的完整代码，请参阅 Ajax 章节的末尾。 https://select2.org/data-sources/ajax

【讨论】：

我已经尝试了所有这些，但没有任何运气。你能给我一个例子吗？还是谢谢。

请再次检查我的答案

对不起，也许我的问题并不清楚。我的清单很大。我想要的是列出一些如此常见的选项，其余的由 ajax 列出。当前的实现确实允许两者都做，无论是静态选项还是动态。我两个都需要。感谢您的帮助。

啊，好吧，对不起，我明白了一些别的。我认为您可能需要一个自定义数据适配器，但不确定如何实现。