select2如何显示数据

Question

我想在我的 Symfony 项目中使用 select2，但仍然不知道如何显示结果。我的前端代码是

    $(".js_search").select2({
                ajax: {
                    url: "{{ path('search') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term, // search term
                            page: params.page
                        };
                    },
                    processResults: function (data, params) {
                        console.log(data.items);
                        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
            });
        });
        function formatRepo (repo) {
            if (repo.loading) return repo.text;

            var markup = '<div class="clearfix">' +
                    '<div class="col-sm-1">' +
                    '<img src="' + repo.owner.avatar_url + '" style="max-width: 100%" />' +
                    '</div>' +
                    '<div clas="col-sm-10">' +
                    '<div class="clearfix">' +
                    '<div class="col-sm-6">' + repo.full_name + '</div>' +
                    '<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + repo.forks_count + '</div>' +
                    '<div class="col-sm-2"><i class="fa fa-star"></i> ' + repo.stargazers_count + '</div>' +
                    '</div>';

            if (repo.description) {
                markup += '<div>' + repo.description + '</div>';
            }
            markup += '</div></div>';
            return markup;
        }

        function formatRepoSelection (repo) {
            return repo.full_name || repo.text;
        }

g 对于后端

    public function searchAction()
{
    $response = new Response();
    $response->setContent(json_encode(
        [
            'items' =>
                [
                    'id' => 1,
                    'text' => 'test'
                ]
        ]
    ));
    $response->headers->set('Content-Type', 'application/json');
    return $response;
}

我不知道 $response 应该是什么样子或如何在视图中显示返回的数据。 有人知道答案吗？

我正在使用这个https://select2.github.io/

Answer 1

您的响应应该是一个 JSON 数组，其中包含 Select2 用于为下拉菜单创建选项标签的元素。

在您的情况下，对您的 AJAX 请求的响应中的内容将是：

[{"id": 1, "text":"test"}]

Select2 然后将使用您的响应中的选项和值更新由 JQuery 选择器 $(.js-search) 标识的元素。