Usage question: attaching an array and have option elements lazily created?

[nowherenearithaca]

This may be trivial.

I have a large array and want the select to create the option elements only as necessary - me creating them all up front is too slow. I saw a few hints that this might be possible with bootstrap-select as it is but I haven't seen that it is fully possible....

thanks!

[caseyjhol]

While the groundwork is laid for dynamic options, there is still some work needed in order to get this to work smoothly. Something like this might point you in the right direction:

$('#number').on('loaded.bs.select', function () {
  var Selectpicker = $('#number').data('selectpicker');

  Selectpicker.$menuInner.on('scroll', function () {
    var scrollTop = Selectpicker.selectpicker.view.scrollTop;

    // if within 100px of the bottom of the menu, load more options
    if ($(this)[0].scrollHeight - Selectpicker.sizeInfo.menuInnerHeight - scrollTop < 100) {
      $('#number').append(newOptions);
      $('#number').selectpicker('refresh');
    }
  });
});

See an example here: https://next.plnkr.co/edit/OAfCYwHVHOArFAz7.

[nowherenearithaca]

wow thanks! - would the livesearch work on data not yet in an option element? I looked at the code and this did not seem to be case on a quick look

[nowherenearithaca]

btw - I had forgotten about jquery ui's autocomplete, where you can pass it the array and it just adds things as necessary based on what you typed

[caseyjhol]

It's not yet possible to use live search to search for options not yet in the array. You'll want to follow #1305. How many options would there potentially be? With bootstrap-select v1.13.2 and the virtualScroll option, thousands of options render much faster than in previous versions.

[nowherenearithaca]

it seems like first just creating > 10,000 option elements alone is the bottleneck, before the selectpicker is even instantiated.

jquery's autocomplete is much faster (since it does the lazy load thing from the array you give it) and works, but you don't get a nice look at what's there before you decide to enter a particular search term... which might be incompatible with performance in the first place...

[caseyjhol]

Check out https://github.com/truckingsim/Ajax-Bootstrap-Select in the meantime.

[nowherenearithaca]

hey thanks - will check it out!

In my case, I'm not getting data via ajax btw.

[caseyjhol]

I haven't looked at that plugin too closely, but I think you should be able to simulate an Ajax request and use local data instead.

[grosser]

could also try lazy-loading #2187

[caseyjhol]

Please 👍 and follow #899.