Bootstrap, Select2, The jQuery replacement for select boxes, limit results

user_18098784 0
Viewed 55

On client side (there is no server side) we have html file with javascript which we are open in browser. In HTML file we include bootstrap and select2 plugins to create UI interface and we include one file with data which have more than 10 000 rows. This is part of basic.html file:

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

This is part of mydata.js file:

var mydata = [{id: 0, text: "aa"}, ..... ...... {id: 10000, text: "aa 10000"}];

Question: Because variable mydata is very big, we have bad responsive time when we are selecting data. How can we restrict Select2 plugin to initially select only 10 rows on begining (initially when we load the script) and every time when trying to find some data? On the other words, results for showing must be limited.

There are no server side, no ajax, no (my)sql server, no any other programing language, only html, javascript and bootstrap5 with select2 plugin.

jquery-select2 html javascript
2 Answers

As I can see from your example that you gave us, u want to get to information by typing characters and u want that information to present like tags in input field? If I am correct than u can get this by involving "Typeahead" option in your html file which is standard part of bootstrap plugin's.

<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

user_47287690

If the problem come from the generation of the select by select2, i don't really see a solution. for me, you can replace select2 element by a autocomplete input text w3school (I tested it with some autogenerated data, 200 000 object to be exact, wit hsame structure as you and it's not too bad)

user_121591960
Related