Метод AJAX Select2 JQuery из примера не работает - PullRequest
Новая
       11

Метод AJAX Select2 JQuery из примера не работает

0 голосов
/ 04 сентября 2018

Я хочу создать поле ввода поиска, используя select2.js 4.0.5. Я посмотрел на пример select2 и, в основном, хочу учиться, воссоздав их без использования результата шаблона (только возвращаемый текст).

Однако я не могу заставить его работать. Это самое близкое, что я могу получить: myJSFiddle . 

$(document).ready(function() {
  $(".js-data-example-ajax").select2({
    ajax: {
      url: "https://api.github.com/search/repositories",
      dataType: 'json',
      delay: 250,
      data: function(params) {
        return {
          q: params.term, // search term
          page: params.page
        };
      },
      processResults: function(data, params) {
        // parse the results into the format expected by Select2
        // since we are using custom formatting functions we do not need to
        // alter the remote JSON data, except to indicate that infinite
        // scrolling can be used
        params.page = params.page || 1;

        return {
          results: data.items,
          pagination: {
            more: (params.page * 30) < data.total_count
          }
        };
      },
      cache: true
    }
  });
});

Даже прямое копирование всего из примера не работает: exampleJSFiddle .

Я все еще новичок в JS и Ajax. Я уверен, что что-то упустил. Может кто-нибудь объяснить, что мне не хватает?

1 Ответ

0 голосов
/ 05 сентября 2018

Я наконец запустил его. Хотя я не знаю, как исправить размер окна поиска: ( Рабочая JSFiddle )

HTML 

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

JS 

$(".js-data-example-ajax").select2({
    ajax: {
      url: "https://api.github.com/search/repositories",
      contentType: 'application/json',
      dataType: 'json',
      data: function(params) {
        return {
          q: params.term, // search term
          page: params.page
        };
      },
      processResults: function(data) {
        return {
          results: data.items
        };
      },
      cache: false
    },
    templateResult: formatResult
  });

  function formatResult(result) {

    return result.full_name;
  };
...