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

您的代码应该看起来像这样。无需获取方法。

$('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或将数据转换为某些格式。