Как предварительно загрузить плагин select2 с AJAX? - PullRequest
Новая
       5

Как предварительно загрузить плагин select2 с AJAX?

0 голосов
/ 10 апреля 2019

В этом примере: 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 Ответ

0 голосов
/ 12 апреля 2019

Пожалуйста, ознакомьтесь с официальной документацией: https://select2.org/data-sources/ajax Вам нужна функция, которая будет обрабатывать параметры запроса, и другая функция, которая обрабатывает данные ответа.

Вы пробовали это? Как использовать Select2 с JSON через Ajax-запрос?

EDIT: Я создал здесь 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. См. Конец главы Ajax для полного кода примера репозитория GitHub. https://select2.org/data-sources/ajax

...