Very large select box content

Question

I have a selectbox <select> HTML that has a very large content, are more than 1000 records that must be loaded, only that in performance issues I believe it is getting bad.

I would like some solution in javascript, jquery or angular, that solves my performance problem when loading the data in this selectbox.

Currently I load my selectbox like this:

<select id="id_empresa" class="form-control">                                   
    <option value="0">Todas</option>
    <?php foreach( $empresas as $empresa ): ?>
        <option value="<?=$empresa[ "id_empresa" ];?>"><?=$empresa[ "nome" ];?></option>
    <?php endforeach; ?>    
</select>

Answer 1

Generic answer: If you have a large amount of records, actually the select (or similar) element may not be a suitable solution. Try something that allows the user to perform some type of filtering, populating select via AJAX, preferably limiting the maximum number of records that can be returned.

Take a look at this list: 13 jQuery Selectbox/Drop-down Plugins; give preference to those who have AJAX support, to better limit the amount of records that will need to be loaded.