After dynamically loading lot of options dropdown stops working

Question

I am working on select2 multiselect dropdown. But I am trying to load options into drop-down dynamically on selection of other dropdown. When I select value in drop-down then ajax request goes to server and data c means user comes which is nothing but my options which I am trying to load into another dropdown. Following is the dropdown into which I am trying to load data.

$(document).on('change','#platform', function(){
        var platform_value = $(this).val();

        $.ajax({
            url: '/myroute/function_name',
            type: 'Get',
            dataType: 'json',
            data : {platform_value:platform_value},
            success: function (res) {
                console.log('options ready');
                if(res != ""){
                    $('#user_id').html(res);
                    $('#user_id').select2();``
                }
            }
        });
    });

My res object will hold following values.

"<option value=\"1\">abcd</option><option value=\"16000\">ajsha</option>"

I am given only two options for referance. But actully it is more than 16000 options. So once I select platform and ajax request goes till options loading into my dropdown, My entire page not working properly. Even my drop-down not working properly. It takes lot of time to select just one option.

Please help me in this. I am facing this issue and spent lot of hours to solve this.

Answer 1

Since 16000 is a very huge amount of option to render with select2, it takes time to create DOM and render on the page. While doing so a page will misbehave as you are experiencing. The solution would be don't load all 16000 option at a time, load top 1000 result and lazy load other option while scrolling or with the help of a search. Hope this will help.