jQuery: Search functionality only filters the currently displayed rows in the GridView

Search functionality only filters the currently displayed rows in the GridView, rather than searching through all available data.

<asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static" placeholder="Search for details.."></asp:TextBox>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        const searchInput = document.getElementById('<%=SearchBox1.ClientID%>');
        const gridViewRows = document.querySelectorAll('#<%=GridView1.ClientID%> tbody tr');  
        if (searchInput) {
            searchInput.addEventListener('keyup', function () {
                try {
                    const filter = searchInput.value.toLowerCase();

                    gridViewRows.forEach(row => {
                        const cells = row.getElementsByTagName('td');
                        let rowContainsSearchTerm = false;

                        for (let i = 0; i < cells.length; i++) {
                            if (cells[i].textContent.toLowerCase().includes(filter)) {
                                rowContainsSearchTerm = true;
                                break;
                            }
                        }

                        row.style.display = rowContainsSearchTerm ? '' : 'none';
                    });
                } catch (error) {
                    console.error('An error occurred while filtering the rows:', error);
                }
            });
        } else {
            console.error('Search input not found. Check the ClientID.');
        }
    });
</script>