使用world_countries进行Select2搜索

Question

The The The赏金3天后到期..。对此问题的回答有资格获得+50的声誉奖励。

列维帕德想要吸引更多关注关于这个问题。

我已连接https://github.com/stefangabos/world_countries

使用select2列出所有国家/地区的cdn列表。有人知道如何在国家/地区内搜索吗？

​

var countriesList = 'https://cdn.jsdelivr.net/npm/world_countries_lists@latest/data/en/countries.json';

$('select').select2({
  ajax: {
    url: countriesList,
    dataType: 'json',
    delay: 250,
    data: function (params) {
      console.log(params.term);
      return {
        q: params.term
      };
    },
    processResults: function (data) {
      return {
        results: $.map(data, function (item) {
          return {
            id: item.id,
            text: item.name
          };
        })
      };
    }
  },
  width: 300,
  dropdownAutoWidth: true
});

​

Answer 1

因为您的数据源是一个JSON文件，所以将搜索词传递给url不会更改响应。在这种情况下，您可以加载此文件一次，然后使用响应初始化select2：

​

var countriesList = 'https://cdn.jsdelivr.net/npm/world_countries_lists@latest/data/en/countries.json';

$.ajax({
    type: 'GET',
    url: countriesList,
    dataType: 'json',
    success: function(response) {
        $('select').select2({
          data: response.map(e => ({
            id: e.id,
            text: e.name
          })),
          width: 300,
          dropdownAutoWidth: true
        });
    },
    error: function() {},
    complete: function() {}
});

​

或者，如果你仍然想在ajax中使用select2，你可以在processResults(不推荐)：

​

var countriesList = 'https://cdn.jsdelivr.net/npm/world_countries_lists@latest/data/en/countries.json';

$('select').select2({
  ajax: {
    url: countriesList,
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term
      };
    },
    processResults: function (data) {
      let term = this.container.results.lastParams.term;
      if (term) data = data.filter(d => d.name.includes(term));
      return {
        results: $.map(data, function (item) {
          return {
            id: item.id,
            text: item.name
          };
        })
      };
    }
  },
  width: 300,
  dropdownAutoWidth: true
});

​