.bpw-live-search { width: 100%; max-width: 600px; margin: 20px auto; font-family: Arial, sans-serif; position: relative; } .bpw-search-box { display: flex; align-items: center; gap: 10px; padding: 7px; background: #fff; border: 2px solid #ff6600; border-radius: 10px; box-shadow: 0 3px 12px #00000012; } .bpw-search-icon { padding-left: 8px; font-size: 20px; } .bpw-search-box input { flex: 1; min-width: 0; padding: 12px 4px; border: none; outline: none; font-size: 15px; background: transparent; } .bpw-search-box button { border: none; border-radius: 7px; padding: 12px 18px; background: #ff6600; color: white; font-size: 15px; font-weight: bold; cursor: pointer; } .bpw-search-box button:hover { background: #d94f00; } .bpw-suggestions { display: none; position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 9999; background: white; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 6px 18px #00000018; overflow: hidden; } .bpw-suggestions a { display: block; padding: 13px 16px; color: #222; text-decoration: none; border-bottom: 1px solid #eee; } .bpw-suggestions a:hover { background: #fff2e8; color: #e65500; } .bpw-suggestions .bpw-message { padding: 13px 16px; color: #666; font-size: 14px; } @media (max-width: 480px) { .bpw-search-box { gap: 5px; } .bpw-search-box button { padding: 11px 12px; } } (function () { const input = document.getElementById('bpwSearchInput'); const box = document.getElementById('bpwSuggestions'); const form = document.getElementById('bpwSearchForm'); if (!input || !box || !form) return; let timer; let controller; function showMessage(message) { box.replaceChildren(); const item = document.createElement('div'); item.className = 'bpw-message'; item.textContent = message; box.appendChild(item); box.style.display = 'block'; } input.addEventListener('input', function () { clearTimeout(timer); if (controller) controller.abort(); const query = input.value.trim(); if (query.length < 2) { box.style.display = 'none'; box.replaceChildren(); return; } timer = setTimeout(async function () { controller = new AbortController(); showMessage('Searching products...'); try { const url = new URL( '/wp-json/wp/v2/product', window.location.origin ); url.searchParams.set('search', query); url.searchParams.set('per_page', '6'); const response = await fetch(url, { signal: controller.signal }); if (!response.ok) { throw new Error('Search unavailable'); } const products = await response.json(); box.replaceChildren(); if (!products.length) { showMessage('No matching products found.'); return; } products.forEach(function (product) { const link = document.createElement('a'); link.href = product.link; link.textContent = product.title.rendered .replace(/]*>/g, ''); box.appendChild(link); }); box.style.display = 'block'; } catch (error) { if (error.name !== 'AbortError') { showMessage('Suggestions unavailable. Press Search to continue.'); } } }, 300); }); form.addEventListener('submit', function (event) { const query = input.value.trim(); if (!query) { event.preventDefault(); return; } input.value = query; }); document.addEventListener('click', function (event) { if (!event.target.closest('.bpw-live-search')) { box.style.display = 'none'; } }); })();