Realtime Search Results for Bricks Builder Overlay Search
it works with wp-rest makes the request from wp-json that is why it is so fast and instant 🙂
You can select the ul with .custom-search-results or list items .custom-search-results li or .custom-search-results a and style it with css.
// 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 = ''; } }); });