Javascript поиск/фильтр по таблице

Живой поиск по всем ячейкам таблицы на чистом Javascript В примере используются классы CSS фреймворка Boostrap .

Допустим имеется таблица с идентификатором info-table и поле ввода с идентификатором search-text.

<input class="form-control" type="text" placeholder="Фамилия или телефон" id="search-text" onkeyup="tableSearch()">
<table class="table table-striped" id="info-table">
    <thead>
        <tr>
            <th>Фамилия</th>
            <th>Телефон</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>        

Тогда полю ввода необходимо добавить обработчик на событие onkeyup со следующей функции tableSearch.

function tableSearch() {
    var phrase = document.getElementById('search-text');
    var table = document.getElementById('info-table');
    var regPhrase = new RegExp(phrase.value, 'i');
    var flag = false;
    for (var i = 1; i < table.rows.length; i++) {
        flag = false;
        for (var j = table.rows[i].cells.length - 1; j >= 0; j--) {
            flag = regPhrase.test(table.rows[i].cells[j].innerHTML);
            if (flag) break;
        }
        if (flag) {
            table.rows[i].style.display = "";
        } else {
            table.rows[i].style.display = "none";
        }

    }
}

Пример таблицы с поиском

Фамилия Телефон
Иванов 511246
Петров 511751
Сидоров 511951
Медведев 512456
Николаев 512781

Похожие записи

RxJs Subjects

Выдержки из доклада Андрея Алексеева (Tinkoff) про RxJs (Subject, Behaviour Subject, Replay Subject, Async Subject). Применение в Angular.

Поисковый запрос с помощью RxJS

Показательная и востребованная задача. Получение набираемого запроса из поля ввода через полсекунды после того, как пользователь закончил ввод с показом лоадера.