How to use efficently in Jquery Chosen Plugin?

Question

I have used the jQuery chosen plugin. but my datasets are too large, so the select box is hanging and slow. Here is how I have implemented the plugin:

var request = $.ajax({
    method: "POST",
    url: "ajaxRequest.php",
    dataType: "json",
    data: {fn: 'getCompanyEvent', company_id: selected_cid},
    success: function(reqResult){
        var append_string = '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">'+
                '<div class="row form-group">'+
                    '<label class="control-label col-lg-3">Select'+ ' Event</label><span class="col-lg-1">:</span>'+
                    '<div class="col-lg-8">'+ 
                        '<select class="chosen" style="width:200px;" onChange="getTemp(this)>'+
                          '<option>Select</option>';
                        $.each(reqResult.result, function(ind, va){
                            append_string += '<option value='+va.event_id+'>'+va.event_name+'</option>';
                        });    
    append_string += '</select>'+
                    '</div>'+
                '</div>'+ 
            '</div>';
        $('#dynmic_slct').append(append_string);
        jQuery(".chosen").chosen();
    }
});

I have used to jquery ajax() .. ajax response result more than 20k record so it was very slow to select in UI, I want to list out more than 5k values in the select element.

Answer 1

You are appending <option> elements for all records retrieved from your backend resource. As you said your dataset is very large so it is normal for select box to hang.

What you can try is to implement a paging mechanism for your select box. For example you can parametrize your backend resource (ajaxRequest.php) with an offset like value (ajaxRequest.php?offsett=50) and then for each request you get a constant amount of elements from your data set. For example you can obtain your records by 50 items per request.

And then for each request you append your <option> elements as you do before. One final thing is to implement a button or something to request the next dataset elements.

Another thing that you can try is to filter the dataset by sending a parameter to the backend resource and then you can append only the filtered results to your select box. You can achieve this by implementing onChange event of jQuery Chosen Plugin Filter Text Box.