无法加载 Select2 Ajax 结果

Question

每当我尝试在我的 select2 ajax 搜索栏中搜索结果时，我都会收到以下消息：

'无法加载结果'

HTML：

<select class="js-data-example-ajax form-control" multiple="multiple"></select>

Javascript：

$('select').each(function(idx, ele) {
            $(ele).select2({
                theme: 'bootstrap4',
                placeholder: ele.getAttribute('placeholder'),
                ajax: {
                    url: '/product/api/search',
                    dataType: 'json' },
                    type: 'GET',
            });
        });

我认为我的 Ajax 设置有误，您能帮忙吗？

Answer 1

您的代码应如下所示。不需要 GET 方法。

$('select').each(function(idx, ele) {
  $(ele).select2({
      ajax: {
        url: 'https://api.github.com/search/repositories',
        dataType: 'json'
        // Additional AJAX parameters
      }
   }
});

您的问题也可能出在您的源 json 格式中，因为 select2 需要自己的 results 格式。

为了实现这一点，Select2 需要一个非常具体的数据 格式。这种格式由一个 JSON 对象组成，该对象包含一个数组 结果键作为键的对象。

{
  "results": [
    {
      "id": 1,
      "text": "Option 1"
    },
    {
      "id": 2,
      "text": "Option 2"
    }
}

您还可以将processResults or transform 数据转换为特定格式。