Js Custom Select Demo

Example 1:

Default Select

<script type="text/javascript">
    new jsCustomScroll(document.getElementById('testScroll'));
</script>

Example 2:

Select with search and the optional change function is called to change select

<script type="text/javascript">
    new jsCustomScroll(document.getElementById('test2'), {
        search: true,
        scroll: {
            minScrollbarLength: 40,
        },
        change: function (option, selectedLI) {
            console.log(option);
            console.log(selectedLI);
        }
    });
</script>

Example 3:

Select with search and autoloading in select

<script type="text/javascript">
    var i = 0;
    var select2 = new jsCustomSelect(document.getElementById('test3'), {
        search: true,
        //For dynamic loading you just need to activate js-custom-scroll, and configure `at_Fn` function
        scroll: {
            at: 80,
            at_Fn: function (scrollbar, el) {
                i++;
                var _select = select2.getSelect();
                for (var k = 0; k < 15; k++) {
                    var _opt = document.createElement('option');
                    var data = Math.random();
                    _opt.value = data;
                    _opt.innerHTML = data;
                    _select.appendChild(_opt);
                }
                select2.update();
                return i < 5;
            }
        }
    });
</script>