As the title says. THIS works on all browsers EXCEPT Safari (iPad).

Safari prevents TR with display:none to be reshown using display:block or display:”; UNLESS a JavaScript alert(”) is used at the end.

const searchBox = document.getElementById('search-box');
const customerTable = document.getElementById('listTable');

if (searchBox) {
    searchBox.addEventListener('input', function () {
    var numResults = 0;

        const searchValue = searchBox.value.toLowerCase();
        const rows = customerTable.getElementsByTagName('tr');

        for (let i = 1; i < rows.length; i++) {
            const customerName = rows[i].getElementsByTagName('td')[0].textContent.toLowerCase();
            if (customerName.includes(searchValue)) {
        rows[i].style.display = 'block';
        numResults++;
            } else {
          rows[i].style.display = 'none';
            }
        }

        return true;
    });
}
</script>

Somehow THIS fixes it:

const searchBox = document.getElementById('search-box');
const customerTable = document.getElementById('listTable');

if (searchBox) {
    searchBox.addEventListener('input', function () {
    var numResults = 0;

        const searchValue = searchBox.value.toLowerCase();
        const rows = customerTable.getElementsByTagName('tr');

        for (let i = 1; i < rows.length; i++) {
            const customerName = rows[i].getElementsByTagName('td')[0].textContent.toLowerCase();
            if (customerName.includes(searchValue)) {
        rows[i].style.display = 'block';
        numResults++;
            } else {
          rows[i].style.display = 'none';
            }
        }

        alert('Why in the Steve Jobs does this fix anything??');
        return true;
    });
}
</script>

Please help. I’m going to cry soon.