Select2, temps de chargement trop long. symfony2.7

Bonsoir,

j'utilise genemuformbundle pour récupérer mes entity dans ma database et select2 pour faire l'autocomplete dans mon formulaire. malheureusement comme j'ai plus de 2000 items ça prend beaucoup de temps pour charger les éléments.

symfony 2.7 me donne cette erreur :OutOfMemoryException. Apparemment je devrais faire une pagination qui me charge pas tout les éléments en même temps dans la page. Quelqu'un aurait-il une idée comment le faire ? je ne m'y connais pas trop en javascript.

Merci

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

<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>

->add('airport', 'genemu_jqueryselect2_entity', array(
                'class' => 'FLYBookingsBundle:IataAirportCodes',
                'property' => 'airport',
 
            ))
 
            ->add('airport1', 'genemu_jqueryselect2_entity', array(
                'class' => 'FLYBookingsBundle:IataAirportCodes',
                'property' => 'airport',
 
            ))

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

j'ai oublié de dire que le dernier script je l'ai trouvé sur stackoverflow, mais il ne marche pas.