JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

Customer Search:
<input type="search" id="SearchBox" />
<br />
<div class="scrollable" id="CustomerSelectDiv">
    <select size=2 class="scrollableinside" id="CustomerSelect">
        <option value=100>test</option>
        <option value=101>test1</option>
        <option value=102>test2</option>
        <option value=103>test3</option>
    </select>
</div>
<div style="display: none;">
    <select id="CustomerSelectHidden"></select>
</div>

JavaScript

var $options = $('#CustomerSelect option');
    document.getElementById("SearchBox").onkeyup = function () {
        var $HiddenOptions = $('#CustomerSelectHidden option');
        $HiddenOptions.each(function (index, value) {
            document.getElementById('CustomerSelect').appendChild(this);
        });
        var search = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
        var element = $options.filter(function () {
            var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
            return !~text.indexOf(search);

        }).appendTo(document.getElementById('CustomerSelectHidden'));
        $('#CustomerSelect option').sort(Sort).appendTo('#CustomerSelect');
    }
   function Sort(a, b)
   {
       return (a.innerHTML > b.innerHTML) ? 1 : -1;
   }