Поиск в Селекте

Есть код, в принципе всё работает как нужно. В начале выбор осуществляется по 1 столбцу, затем по 2 и т.д. Столкнулся со следующей ситуацией. Строчек в таблице будет 700+. Пользователю не удобно будет производить поиск 700+ option. Есть ли возможность реализовать поиск с клавиатуры на чистом JS и с совместимостью в IE11. То есть открываем 1 список и внутри дополнением поиск и так со всеми столбцами

HTML

<table id="sf" style="width: 400px;" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <select style = "width: 100%;">
                    <option value="">-- Выбрать --</option>
                    <option value="">Все наименования</option>
                    <option value="зеленый">зеленый</option>
                    <option value="красный">красный</option>
                </select>
            </td>
            <td>
                <select style="width: 100%;">
                    <option value="" >-- Выбрать --</option>
                    <option value="">Все наименования</option>
                    <option value="да">да</option>
                    <option value="нет">нет</option>
                </select>
            </td>
            <td>
                <select style="width: 100%;">
                    <option value="" >-- Выбрать --</option>
                    <option value="">Все наименования</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>зеленый 1</td>
            <td>да</td>
            <td>2</td>
        </tr>
        <tr>
            <td>зеленый 2</td>
            <td>нет</td>
            <td>1</td>
        </tr>
        <tr>
            <td>красный 1</td>
            <td>нет</td>
            <td>2</td>
        </tr>
        <tr>
            <td>красный 2</td>
            <td>да</td>
            <td>1</td>
        </tr>
    </table> 

js

window.onload = function() {
            var tab = document.querySelector('#sf'),
                tr = tab.querySelectorAll('tr:nth-child(n+2)'),
                sel = tab.querySelectorAll('select'),
                arr = [],
                res = document.querySelector('.res');
            Array.prototype.forEach.call(sel, function(a, b) {
                arr[b] = a.value;
                a.onchange = function() {
                    arr[b] = a.value;
                    Array.prototype.forEach.call(tr, function(a, b) {
                        var c = Array.prototype.every.call(a.querySelectorAll("td"), function(a, b) {
                            return RegExp(arr[b]).test(a.textContent)
                        });
                        a.style.display = c ? "" : "none"
                    })
                }
            });
        }

Есть данная реализация (https://javascript.ru/forum/css-html/69429-kak-sdelat-poisk-v-selekte.html) но там используется JQ

Спасибо!