AJAX Grid Search (multiple grids)

document.addEventListener('DOMContentLoaded', function () {

    const searchInput = document.querySelector('#gridSearch input[type="text"]');

    const searchForm = document.querySelector('#gridSearch form'); // Adjust if your search is within a form

    const initialGrid = document.querySelector('.initial-grid'); // The initial content to hide when searching

    const gridResults = document.querySelector('.grid-results'); // The container that will display search results

    // Initially hide the grid results and only show the initial grid

    gridResults.style.display = 'none';

    initialGrid.style.display = '';

    // Disable form submission to prevent page reloads

    if (searchForm) {

        searchForm.addEventListener('submit', function(e) {

            e.preventDefault();

        });

    }

    searchInput.addEventListener('keyup', function(e) {

        const filter = e.target.value.toLowerCase();

        // Toggle display based on search input

        initialGrid.style.display = filter ? 'none' : '';

        gridResults.style.display = filter ? '' : 'none';

        // Proceed with filtering if there's input

        if (filter) {

            const gridItems = gridResults.querySelectorAll('.w-grid-item');

            gridItems.forEach(item => {

                const textContent = item.textContent || item.innerText;

                if (textContent.toLowerCase().includes(filter)) {

                    item.style.display = '';

                } else {

                    item.style.display = 'none';

                }

            });

        }

    });

});