En el lado del cliente (no hay lado del servidor) tenemos un archivo html con javascript que estamos abiertos en el navegador. En el archivo HTML, incluimos complementos bootstrap y select2 para crear una interfaz de interfaz de usuario e incluimos un archivo con datos que tienen más de 10 000 filas. Esto es parte del archivo basic.html:
.... <select class="js-example" name="selectmyData[]" id="selectmyData" multiple="multiple"></select> <script src="data/mydata.js"><script> <script type="text/javascript"> $(document).ready(function() { $(".js-example").select2({ tags: true, data: mydata }) }); </script> ...Esto es parte del archivo mydata.js:
var mydata = [{id: 0, text: "aa"}, ..... ...... {id: 10000, text: "aa 10000"}];Pregunta : Debido a que la variable mydata es muy grande, tenemos un mal tiempo de respuesta cuando seleccionamos datos. ¿Cómo podemos restringir el complemento Select2 para seleccionar inicialmente solo 10 filas al principio (inicialmente cuando cargamos el script) y cada vez que intentamos encontrar algunos datos? En otras palabras, los resultados para mostrar deben ser limitados.
No hay lado del servidor, ni ajax, ni servidor (my)sql, ni ningún otro lenguaje de programación, solo html, javascript y bootstrap5 con el complemento select2.
Como puedo ver en el ejemplo que nos dio, ¿quiere obtener información escribiendo caracteres y desea que esa información se presente como etiquetas en el campo de entrada? Si estoy en lo correcto, puede obtener esto al incluir la opción "Typeahead" en su archivo html, que es una parte estándar de los complementos de arranque.
<script> $(document).ready(function(){ // Defining the local dataset var cars = ['Audi', 'BMW', 'Bugatti', 'Ferrari', 'Ford', 'Lamborghini', 'Mercedes Benz', 'Porsche', 'Rolls-Royce', 'Volkswagen']; // Constructing the suggestion engine var cars = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.whitespace, queryTokenizer: Bloodhound.tokenizers.whitespace, local: cars }); // Initializing the typeahead $('.typeahead').typeahead({ hint: true, highlight: true, /* Enable substring highlighting */ minLength: 1 /* Specify minimum characters required for showing suggestions */ }, { name: 'cars', source: cars }); }); </script>https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-typeahead.php
Si el problema proviene de la generación de select por select2, realmente no veo una solución. para mí, puede reemplazar el elemento select2 por un texto de entrada de autocompletar w3school (lo probé con algunos datos generados automáticamente, 200 000 objetos para ser exactos, con la misma estructura que usted y no está tan mal)