Question

我使用了jQuery选择的插件。但我的数据集太大，所以选择框挂起并且速度很慢。以下是我实现插件的方法：

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();
    }
});

我已经习惯了jquery ajax() .. ajax响应结果超过20k记录因此在UI中选择非常慢，我想在select元素中列出超过5k的值。

Answer 1

您正在为从后端资源检索到的所有记录附加<option>个元素。正如您所说，您的数据集非常大，因此选择框挂起是正常的。

您可以尝试为您的选择框实现分页机制。例如，您可以使用类似值的偏移量（ajaxRequest.php？offsett = 50）对您的后端资源（ajaxRequest.php）进行参数化，然后对于每个请求，您将从数据集中获得恒定数量的元素。例如，您可以按照请求获得50个项目的记录。

然后，对于每个请求，您都会像之前一样追加<option>元素。最后一件事是实现一个按钮或其他东西来请求下一个数据集元素。

您可以尝试的另一件事是通过向后端资源发送参数来过滤数据集，然后您只能将过滤后的结果附加到您的选择框。您可以通过实现jQuery Chosen Plugin Filter Text Box的onChange事件来实现这一目的。

如何在Jquery Chosen插件中有效使用？

1 个答案: