Wyszukiwarka w tabeli


Imię i nazwisko Zawód Miejscowość
Maciej Nowak księgowy Kraków
Anna Kowalska stomatolog Poznań
Tomasz Jacek programista Toruń
Andrzej Niedzielak murarz Zakopane
Jadwiga Szarak nauczyciel Szczecin
Katarzyna Płońska sprzedawca Włocławek
Miłosz Zieliński grafik Płock
Henryk Łapa wykładowca Katowice
Maciej Dylan murarz Piła
Herbert Siemanowski programista Wrocław
Joanna Kwiecień stylista Lublin
Tamara Domaniewska architekt Kraków
Jacek Czempion wykładowca Warszawa
Karolina Kowalczyk artysta Warszawa
Adam Nowak mechanik Gdańsk
(function() {

if( !(window.history && history.pushState) ) return;

var searchInput = document.querySelector("#searchInput"),
    rows = document.querySelectorAll("#table tbody tr"),
    timer;

function filterRows() {

    [].forEach.call(rows, function(row) {

        var cells = row.querySelectorAll("td"),
            containsText = false;

        [].forEach.call(cells, function(cell) {
            var text = cell.textContent.toLowerCase(),
                search = searchInput.value.toLowerCase();

            if(text.indexOf(search) != -1)
                containsText = true;
        });

        if(containsText)
            row.style.display = "";
        else
            row.style.display = "none";

    });

}

searchInput.onkeyup = function() {

    clearTimeout(timer);

    timer = setTimeout(function() {

        if(searchInput.value != "")
            window.history.pushState(searchInput.value, "", "#search=" + encodeURI(searchInput.value));

    }, 500);

    filterRows();

}

window.onpopstate = function(e) {

    if(e.state !== null) {
        searchInput.value = e.state;

        filterRows();
    } else {
        var searchValue = window.location.hash.split("=").pop();

        searchInput.value = decodeURI(searchValue);

        filterRows();
    }

}

})();