Add large option problem

[postsal]

when you want to Load a lot of options，do not use $('#public-methods').multiSelect('addOption', { value: 42, text: 'test 42', index: 0 });,This will cause many options to not load.

[postsal]

When I first tried it，I do it like this

$(document).ready(function () {
    $('#element').multiSelect({
        selectableHeader: "<input type='text' class='form-control search-input' autocomplete='off' id='selectChannel' placeholder='search...'>",
        selectionHeader: "<input type='text' class='form-control search-input' autocomplete='off' placeholder='search...'>",
        afterInit: function (ms) {
            var that = this,
                $selectableSearch = that.$selectableUl.prev(),
                $selectionSearch = that.$selectionUl.prev(),
                selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
                selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';
    
            that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                .on('keydown', function (e) {
                    if (e.which === 40) {
                        that.$selectableUl.focus();
                        return false;
                    }
                });
    
            that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                .on('keydown', function (e) {
                    if (e.which == 40) {
                        that.$selectionUl.focus();
                        return false;
                    }
                });
        },
        afterSelect: function () {
            this.qs1.cache();
            this.qs2.cache();
        },
        afterDeselect: function () {
            this.qs1.cache();
            this.qs2.cache();
        }
    });
});

then I use Ajax request data , use Addoption and refresh method, so many options to not load.

    for (let i = 0; i < items.length; i++) {
        let item = items[i];
        $('#element').multiSelect('addOption', {value: item.value, text: item.text, index: i});
    }
    $('#element').multiSelect('refresh');

[postsal]

The way to solve the problem is

    for (let i = 0; i < items.length; i++) {
        let item = items[i];
        $('#element').append('<option value="' + item.value +
                            '">' + item.text +
                            '</option>')
    }
    $('#element').multiSelect({
        selectableHeader: "<input type='text' class='form-control search-input' autocomplete='off' id='selectChannel' placeholder='search...'>",
        selectionHeader: "<input type='text' class='form-control search-input' autocomplete='off' placeholder='search...'>",
        afterInit: function (ms) {
            var that = this,
                $selectableSearch = that.$selectableUl.prev(),
                $selectionSearch = that.$selectionUl.prev(),
                selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
                selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';

            that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                .on('keydown', function (e) {
                    if (e.which === 40) {
                        that.$selectableUl.focus();
                        return false;
                    }
                });

            that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                .on('keydown', function (e) {
                    if (e.which == 40) {
                        that.$selectionUl.focus();
                        return false;
                    }
                });
        },
        afterSelect: function () {
            this.qs1.cache();
            this.qs2.cache();
        },
        afterDeselect: function () {
            this.qs1.cache();
            this.qs2.cache();
        }
    });

Ugh...