document.getElementById('searchInput').addEventListener('input', function(event) {
    // get the query and table rows
    let q = this.value;
    let rows = document.querySelectorAll('tr.result-row');
    let results = 0;
    let odd = 1;

    // toggle the classnames to show/hide and redo zebra stripes
    for (var i = 0; i < rows.length; i++) {
        // toggle classes
        if (rows[i].innerText.toLowerCase().includes(q.toLowerCase())) {
            rows[i].className = (odd) ? 'result-row bg-gray-100 dark:bg-gray-800' : 'result-row';
            results = results + 1;
            odd = (odd) ? 0 : 1;
        } else {
            rows[i].className = 'result-row hidden';
        }

        // if there are no results, show the empty message
        if (results == 0) {
            document.getElementById('noResults').classList.remove('hidden');
        } else {
            document.getElementById('noResults').classList.add('hidden');
        }
    }
});