选择2 4.0 JSON搜索不起作用

Select2 4.0 JSON search not working

本文关键字:搜索 不起作用 JSON 选择      更新时间:2023-09-26

几个小时后,我终于加载并正确显示了json文件,包括使用Select2 4.0的标志图标,看看代码看起来多么简单,真是太荒谬了。

但现在,由于某种原因,搜索功能不起作用。我无法搜索任何选项。

希望它快速而简单,我可以因为没有早点发现它而打自己的头。

HTML:

<select id="country_select" class="form-control"></select>

JS:

<script>
        function formatCountry (country) {
            if (!country.id) { return country.text; }
            var $country = $(
                    '<span><img src="/assets/img/flags/' + country.code.toLowerCase() + '.png" class="flag" /> ' + country.text + '</span>'
            );
            return $country;
        };
        $('#country_select').select2({
            templateResult: formatCountry,
            templateSelection: formatCountry,
            ajax: {
                url: '/assets/json/countries.json',
                dataType: 'json',
                data: function (params) {
                    return {
                        q: params.term,
                        page: params.page
                    };
                },
                processResults: function (data, page) {
                    return {
                        results: $.map(data, function(country) {
                            return { id: country.id, code: country.code, text: country.name };
                        })
                    };
                }
            }
        });
    </script>

JSON:

{
"id":53,
"code":"CW",
"name":"Curaçao",
"iso_alpha_3":"CUW",
"iso_numeric":531
},
{
"id":54,
"code":"CX",
"name":"Christmasøya",
"iso_alpha_3":"CXR",
"iso_numeric":162
},
{
"id":55,
"code":"CY",
"name":"Kypros",
"iso_alpha_3":"CYP",
"iso_numeric":196
},

Select2希望您的结果将在服务器端进行筛选,因此在使用AJAX时不会进行任何匹配。

假设您的JSON是静态的,我建议您使用$.ajax预加载它,然后使用data选项而不是ajax将它加载到Select2中。