Question

我使用select2 js遇到了问题，这是我的json回复

{"items":[{"name":"majid"}],"total_count":1,"incomplete_results":false}

这是我的javascript代码

$(".js-example-data-ajax").select2({
    minimumResultsForSearch: Infinity,
    width: 250,
    //containerCssClass: 'bg-indigo-400',
    //dropdownCssClass: 'bg-indigo-400',
    //containerCssClass: 'select-lg',
    placeholder: "Select a State",
    allowClear: true,
    //tags: true,
    ajax: {
        url:'set',//'https://api.github.com/search/repositories',//'set',
        dataType: 'json',
        delay: 250,
        data: function (params) {
            //alert(params.page);
            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
    },
    //escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
    minimumInputLength: 1,
    //templateResult: formatRepo, // omitted for brevity, see the source of this page
    //templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});

我不知道我的错误在哪里，我已经阅读了它的例子，但找不到任何解决方案，非常感谢

Answer 1

选择2接受特定的JSON对象结构，即 -

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

在你的情况下，“items”键应包含一组类似对象的数组，如[{ id: 1, text: 'bug' }]，或者你可以在返回之前修改对象，如下所示 -

var data = $.map(yourArrayData, function (obj) {
   obj.id = obj.id || obj.pk; // replace pk with your identifier
   return obj;
});

他们已在示例代码中添加了以下注释。

processResults: function (data, params) { 
// parse the results into the format expected by Select2

请参阅官方文档 - https://select2.github.io/examples.html#data-array并阅读此内容https://select2.github.io/options.html#data。

如何将Json数据加载到Select2中

1 个答案: