使用 world_countries 选择 2 搜索

Question

我将 https://github.com/stefangabos/world_countries cdn 列表与 select2 连接以列出所有国家/地区。有人知道如何在国家/地区内搜索吗？

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
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet"/>

<select></select>

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() {}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet"/>

<select></select>

或者如果您仍想将 select2 与 ajax 一起使用，您可以使用 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
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet"/>

<select></select>

Answer 2

对于 AJAX 解决方案，修改了@Cuong-le-ngoc 解决方案以适应大小写差异

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(country => (country.name.search(new RegExp(term, "i")) != -1 ));

      return {
        results: $.map(data, function (item) {
          return {
            id: item.id,
            text: item.name
          };
        })
      };
    }
  },
  width: 300,
  dropdownAutoWidth: true
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet"/>

<select></select>

使用 world_countries 选择 2 搜索

Select2 search with world_countries

javascript

ajax

jquery-select2

jquery-select2-4