select2慢速：OutOfMemoryException

Question

我使用select2（v4.0.1）从ma数据库请求数据。当列表超过2000个项目时，它真的变慢了。我正在寻找解决这个问题的方法。

这个html和脚本：

jQuery(document).ready(function($){
    $(".auto").select2({
        placeholder: "Select a state",
        allowClear: true,
        width:"100%"
    });
});

news.html.twig

  <div class="col-md-4">
<div class="form-group form-group-lg form-group-icon-left"><i class="fa fa-plane input-icon"></i><label>From:</label>
{{ form_widget(form.airport, { 'attr': {'class': 'form-control auto',} }) }}
 {{ form_errors(form.airport) }}</div></div>

<div class="col-md-4"><div class="form-group form-group-lg form-group-icon-left"><i class="fa fa-plane input-icon"></i>
<label>To:</label>{{ form_widget(form.airport1, { 'attr': {'class': 'form-control auto',} }) }}{{ form_errors(form.airport1) }}</div></div>

我在stackoverflow中找到了这个，但它不起作用：

// Function to shuffle the demo data
var shuffle = function (str) {
        return str.split('').sort(function () {
            return 0.5 - Math.random();
        }).join('');
    };
    $(function () {
        $('#.auto').select2({
        // For demonstration purposes we first make
        // a huge array of demo data (20 000 items)
        // Heads up; for the _.map and _.filter function i use underscore (actually lo-dash) here
            data             : _.map(_.range(1, 20000), function (i) {
                return {
                    id  : i,
                    text: shuffle('te ststr ing to shuffle') + ' ' + i
                };
            }),
            // NOT NEEDED: These are just css for the demo data
            dropdownCssClass : 'capitalize',
            containerCssClass: 'capitalize',
            // configure as multiple select
            multiple         : true,
            // text for loading more results
            formatLoadMore   : 'Loading more...',
            query            : function (q) {
            // pageSize is number of results to show in dropdown
                var pageSize,
                    results;
                    pageSize = 20;
                    results  = _.filter(this.data, function (e) {
                        return (q.term === "" || e.text.toUpperCase().indexOf(q.term.toUpperCase()) >= 0);
                 });
                q.callback({
                    results: results.slice((q.page - 1) * pageSize, q.page * pageSize),
                    // retrieve more when user hits bottom
                    more   : results.length >= q.page * pageSize
                });
            }
        });
    });