Realtime Search Results for Bricks Builder Overlay Search, WP-REST API

// This script listens for changes in the search input, performs a real-time search using the WP REST API,
// and dynamically shows search results (title and link) in a new DOM element placed after the search form.

document.addEventListener('DOMContentLoaded', function () {
    // Get the search input element
    const searchInput = document.querySelector('.bricks-search-overlay .bricks-search-form input');
    const searchForm = document.querySelector('.bricks-search-overlay .bricks-search-form');

    // Create a new ul element to display the search results and add a custom class for styling
    const resultList = document.createElement('ul');
    resultList.classList.add('custom-search-results'); // Add custom class for styling
    resultList.style.marginTop = '10px'; // Some margin to separate from the search form
    searchForm.insertAdjacentElement('afterend', resultList);

    // Function to fetch search results from the WP REST API
    async function fetchSearchResults(query) {
        const response = await fetch(`/wp-json/wp/v2/posts?search=${query}`);
        if (response.ok) {
            const data = await response.json();
            return data;
        }
        return [];
    }

    // Function to display search results
    function displayResults(results) {
        // Clear the current result list
        resultList.innerHTML = '';

        // Loop through the results and create list items with links
        results.forEach(post => {
            const listItem = document.createElement('li');
            const link = document.createElement('a');
            link.href = post.link;
            link.textContent = post.title.rendered;
            listItem.appendChild(link);
            resultList.appendChild(listItem);
        });
    }

    // Add an event listener to the search input for real-time search
    searchInput.addEventListener('input', async function () {
        const query = searchInput.value.trim();

        // Perform the search only if the query has at least 3 characters
        if (query.length >= 3) {
            const results = await fetchSearchResults(query);
            displayResults(results);
        } else {
            // Clear the result list if the query is less than 3 characters
            resultList.innerHTML = '';
        }
    });
});