Function addItem() becomes slow with many selectize elements

[herrniffler]

I did:

• Search for if my issue has already been submitted
• Make sure I'm reporting something precise that needs to be fixed
• Give my issue a descriptive and concise title
• Create a minimal working example on JsFiddle or Codepen
  (or gave a link to a demo on the Selectize docs)
• Indicate precise steps to reproduce in numbers and the result,
  like below

We use selectize in a table at ours. At e.g. 20 rows = 80 selectize elements, the addItem() function needs around 20ms per call. With 400 rows = 1600 elements, the function then needs ~150 ms per call. Therefore it takes much longer to do a bulk edit with 400 lines than with 20 lines and not only because of the number of elements.
Is there a way to speed it up or reduce the time to 20ms for many elements?

the bulk edit js:

function bulk_edit_dropdown_multi(selector, origin) {
    let dropdowns = origin.closest('table').querySelectorAll(`select.${selector}`);
    for (let dropdown of dropdowns) {
        let dropdownSelectize = dropdown.selectize;
        dropdownSelectize.clear(origin.options.length > 0);
        for (let i = 0; i < origin.options.length; i++) {
            dropdownSelectize.addItem(origin.options[i].value, i < origin.options.length - 1);
        }
    }
}

[risadams]

I'm a bit confused by your example. Are you loading a single selectize in each row that contains options from every row? I probably need a working example to make a good suggestion.

Without more context I would at least suggest removing the for loop and initializing the data in the load event:

$(".item").selectize({
  load: function (query, callback) {
    var data = [/* ... */];
    callback(data);
  },
});

it won't be a huge help, but might get you closer.

your biggest issue is that no matter what else you do when you have nested loops, the more rows you have the worse performance is going to be.

[herrniffler]

Sorry for the misunderstanding…so i have a table with multiple rows and 4 columns containing selectize inputs. we want to provide the possibility to bulk edit (switch values) for one column. and i noticed that the time for this not only increases because of the loops, but also because of the method.
i will try to post an example later.

[herrniffler]

small table: https://jsfiddle.net/sa2qtpx3/2/ -> 1,5ms
lage table: https://jsfiddle.net/9akbndjo/ -> 2-3ms

with more options it gets worse

[risadams]

Moving this to a Q&A discussion instead of an issue, as I think this is more of an issue with your app design as opposed to a general selectize issue ( not that I'm claiming we don't have perf issues here, of course :) )

If possible, I would move the selectize element outside of each row that can be updated once, or to instead include a link/button in each row that opens a modal dialog. That would remove the need for creating and initializing instances in a loop.

[herrniffler]

sorry, i forgot about this. In our application, we need a single selectize element in each row so that our customers can make line-by-line changes. However, we also offer the option of changing all of them at once and then every sub-element has to change. At ~800 rows firefox crashes.