发表新帖
发表新帖

Select2 JS Loading remote data with Ajax

前端 未结
关注
2 863
没有蜡笔的小新
没有蜡笔的小新 2021-01-25 15:30

I am using Select2 JS Version 4.0.0-rc.1 and having trouble loading suggestions with remote Ajax method.

Below are the markups and code
提交评论
  •  加载中...
  • 眼角桃花
    2021-01-25 15:53

    Your Json response has to be like this :

    {
  "total_count":2,
  "items": [
    {"id":"01", "name":"item 1"},
    {"id":"02", "name":"item 2"}
  ]
}

    To work, you an id property.

    Here is my config :

    function formatRepo (repo) {
    if (repo.loading) return repo.text;

    var markup = "<div class='select2-result-repository clearfix'><div class='select2-result-repository__img'><img src='" + repo.img + "' width='80' height='80' /></div><div class='select2-result-repository__meta'><div class='select2-result-repository__title'>" + repo.full_name + "</div>";

    markup += "<div class='select2-result-repository__statistics'><div class='select2-result-repository__type'><i class='fa fa-flash'></i> Type : " + repo.type + "</div><div class='select2-result-repository__usecase'><i class='fa fa-eye'></i> Use case : " + repo.usecase + "</div></div></div></div>";

    return markup;
}

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

// Init select2
$(".select2").select2({
    ajax: {
        type    : "GET",
        url     : "{{ path('tag_search_js') }}",
        dataType: 'json',
        delay   : 250,
        data    : function (params) {
            return {
                q: params.term, // search term
                page: params.page
            };
        },
        processResults: function (data, params) {
            params.page = params.page || 1;

            return {
                results: data.items,
                pagination: {
                    more: (params.page * 30) < data.total_count
                }
            };
        },
        cache: true
    },
    placeholder: "Select a tag",
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 1,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
});

    Hope this helps !

    0 讨论(0)
    •  看不清?
    提交回复
    热议问题