AJAX Grid Search (single grid)

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 gridResults = document.querySelector('.grid-results'); // The container that will display search results

    // 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();

        // Proceed with filtering if there's input

        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';

            }

        });

    });

});