PostSparrow

Select 2 dropdown unlimited scroll with jquery ajax

html code :-

<select  class="form-sm select2 js-example-data-ajax" id="searchUserSelect">
       <option value="">All users</option>

</select>

jquery code :-

<script>
    $(".js-example-data-ajax").select2({
        ajax: {
            url: '{{ route("search.usersDropdown") }}',
            dataType: 'json',
            delay: 250,
            data: function (params) {
            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
        },
        placeholder: 'Search for a repository',
        minimumInputLength: 1,
        templateResult: formatRepo,
        templateSelection: formatRepoSelection
        });
    });

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

        var $container = $(
            "<div class='select2-result-repository clearfix'>" +
            "<div class='select2-result-repository__meta'>" +
                "<div class='select2-result-repository__title'></div>" +
                "<div class='select2-result-repository__description'></div>" +
                "</div>" +
            "</div>" +
            "</div>"
        );

        $container.find(".select2-result-repository__title").text(repo.firstname);
        $container.find(".select2-result-repository__description").text(repo.lastname);
        console.log($container);
        return $container;
    }

    function formatRepoSelection (repo) {
    return repo.full_name || repo.text;
    }
</script>

response should be :-

{
    "total_count": 15347496,
    "incomplete_results": true,
    "items": [
        {
            "id": 1,
            "firstname": "jake",
            "lastname": "wright,
        },
        {
            "id": 2,
            "firstname": "Avinash",
            "lastname": "vyas",
        }
    ]
}