Select2 не будет загружать удаленный JSON-ответ - PullRequest
Новая
       7

Select2 не будет загружать удаленный JSON-ответ

0 голосов
/ 01 ноября 2018

У меня есть API, который вызывается Select2 (v4.0.5), однако в отладочном сообщении в консоли говорится:

Select2: результаты AJAX не вернули массив в ключе results ответа.

Когда я просматриваю документацию на сайте документации Select2 Я, кажется, правильно следую. Это javascript, который я использую на веб-странице: 

$('#account_id').select2({
  debug: true,
  minimumInputLength: 3,
  dataType: 'json',
  ajax: {
    url: '/api/account-query',
    data: function (params) {
      var query = {
        search: params.term,
        v: "new"
      }
      return query;
    },
  }
});

Это ответ от API (конфиденциальные биты отредактированы): 

{
  "results": [{
    "id": "redacted-1",
    "text": "text redacted 1"
  },{
    "id": "redacted-2",
    "text": "text redacted 2"
  },{
    "id": "redacted-3",
    "text": "text redacted 3"
  },{
    "id": "redacted-4",
    "text": "text redacted 4"
  },{
    "id": "redacted-5",
    "text": "text redacted 5"
  }]
}

Если я возьму код select2 и предоставлю ему статический ответ json (без результатов, просто массив), он будет работать просто отлично.

Чего мне не хватает?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018

Я понял это, и, как и ожидалось, я упустил из виду простой аспект:

Заголовок Content-Type должен быть application / json vs text / html

0 голосов
/ 01 ноября 2018

Вы должны предоставить функцию обратного вызова processResults, чтобы Select2 мог правильно выводить результат.

Я создал демонстрационную версию jsfiddle (https://jsfiddle.net/shcavbng/), которая делает то же самое. 

$('#account_id').select2({
  debug: true,
  minimumInputLength: 3,
  dataType: 'json',
  ajax: {
    url: 'https://reqres.in/api/users',
    data: function (params) {
    console.log('params =>' , params);
      var query = {
        search: params.term,
        v: "new"
      }
      return query;
    },
    processResults: function (data) {
      console.log('results =>' , data);
      data = data.data.reduce(function(o,i){o.push({id:i.id,text:i.first_name});return o;},[]);
       console.log('results =>' , data);
      return {
        results: data
      };
    }
  }
});
...