javascript - 如何高效使用Jquery Chosen Plugin？

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 选择插件过滤器文本框的 onChange 事件来实现此目的。