// HVAC Services Search Functionality (function () { 'use strict'; // Wait for DOM to be ready function ready(fn) { if (document.readyState !== 'loading') { fn(); } else { document.addEventListener('DOMContentLoaded', fn); } } ready(function () { initializeSearch(); }); function initializeSearch() { // Find the services section const servicesSection = document.querySelector('.grab-services-section'); if (!servicesSection) { console.warn('HVAC services section not found'); return; } // Find the header and grid const servicesHeader = servicesSection.querySelector('.grab-services-header'); const servicesGrid = servicesSection.querySelector('.grab-services-grid'); if (!servicesHeader || !servicesGrid) { console.warn('Required HVAC elements not found'); return; } // Create search bar HTML const searchHTML = `

`; // Insert search bar after the title servicesHeader.insertAdjacentHTML('beforeend', searchHTML); // Add no results message to grid const noResultsHTML = `

No services found

Try adjusting your search terms or browse all our services.

`; servicesGrid.insertAdjacentHTML('beforeend', noResultsHTML); // Get elements const searchInput = document.getElementById('hvac-service-search'); const clearButton = document.getElementById('hvac-clear-search'); const resultsCount = document.getElementById('hvac-results-count'); const noResults = document.getElementById('hvac-no-results'); const serviceCards = Array.from(servicesGrid.querySelectorAll('.grab-service-link')); // Search data - extract from existing cards const services = serviceCards.map(card => { const nameEl = card.querySelector('.grab-service-name'); const descEl = card.querySelector('.grab-service-description'); const href = card.getAttribute('href') || ''; return { element: card, name: nameEl ? nameEl.textContent.trim() : '', description: descEl ? descEl.textContent.trim() : '', href: href, searchText: [ nameEl ? nameEl.textContent.trim() : '', descEl ? descEl.textContent.trim() : '', href.replace(/[\/\-]/g, ' ') ].join(' ').toLowerCase() }; }); let searchTimeout; // Search functionality function performSearch(query) { const searchTerm = query.toLowerCase().trim(); if (searchTerm === '') { // Reset to original order and show all services services.forEach(service => { service.element.classList.remove('fade-out'); service.element.classList.add('fade-in'); }); // Restore original order services.forEach(service => { servicesGrid.appendChild(service.element); }); // Re-append no results at the end servicesGrid.appendChild(noResults); noResults.classList.remove('show'); updateResultsCount(services.length); return; } // Filter and score services for relevance const matchedServices = services.filter(service => { return service.searchText.includes(searchTerm) || service.name.toLowerCase().includes(searchTerm) || service.description.toLowerCase().includes(searchTerm); }).map(service => { // Calculate relevance score let score = 0; const name = service.name.toLowerCase(); const desc = service.description.toLowerCase(); // Higher score for name matches if (name.includes(searchTerm)) score += 10; if (name.startsWith(searchTerm)) score += 5; // Medium score for description matches if (desc.includes(searchTerm)) score += 3; if (desc.startsWith(searchTerm)) score += 2; // Bonus for exact word matches if (name.split(' ').some(word => word === searchTerm)) score += 15; if (desc.split(' ').some(word => word === searchTerm)) score += 8; return { ...service, score }; }).sort((a, b) => b.score - a.score); // Sort by relevance // Clear the grid except for no-results element while (servicesGrid.firstChild && servicesGrid.firstChild !== noResults) { servicesGrid.removeChild(servicesGrid.firstChild); } // Add matched services first matchedServices.forEach(service => { servicesGrid.insertBefore(service.element, noResults); service.element.classList.remove('fade-out'); service.element.classList.add('fade-in'); }); // Hide non-matched services (don't add them back to DOM) const unmatchedServices = services.filter(service => !matchedServices.find(matched => matched.element === service.element) ); unmatchedServices.forEach(service => { service.element.classList.remove('fade-in'); service.element.classList.add('fade-out'); }); // Show/hide no results message if (matchedServices.length === 0) { noResults.classList.add('show'); } else { noResults.classList.remove('show'); } updateResultsCount(matchedServices.length); } function updateResultsCount(count) { const total = services.length; if (searchInput.value.trim() === '') { resultsCount.textContent = `${total} services available`; } else { resultsCount.textContent = `${count} of ${total} services found`; } } // Event listeners searchInput.addEventListener('input', function () { const query = this.value; // Show/hide clear button if (query) { clearButton.classList.add('show'); } else { clearButton.classList.remove('show'); } // Debounce search clearTimeout(searchTimeout); searchTimeout = setTimeout(() => { performSearch(query); }, 150); }); searchInput.addEventListener('keydown', function (e) { if (e.key === 'Escape') { this.value = ''; this.blur(); clearButton.classList.remove('show'); performSearch(''); } }); clearButton.addEventListener('click', function () { searchInput.value = ''; searchInput.focus(); this.classList.remove('show'); performSearch(''); }); // Initialize results count updateResultsCount(services.length); // Add keyboard navigation let selectedIndex = -1; searchInput.addEventListener('keydown', function (e) { const visibleCards = services.filter(service => !service.element.classList.contains('fade-out') ); if (e.key === 'ArrowDown') { e.preventDefault(); selectedIndex = Math.min(selectedIndex + 1, visibleCards.length - 1); highlightCard(visibleCards, selectedIndex); } else if (e.key === 'ArrowUp') { e.preventDefault(); selectedIndex = Math.max(selectedIndex - 1, -1); highlightCard(visibleCards, selectedIndex); } else if (e.key === 'Enter' && selectedIndex >= 0) { e.preventDefault(); visibleCards[selectedIndex].element.click(); } }); function highlightCard(visibleCards, index) { // Remove previous highlights services.forEach(service => { service.element.style.outline = ''; }); // Highlight selected card if (index >= 0 && visibleCards[index]) { const card = visibleCards[index].element; card.style.outline = '2px solid #3b82f6'; card.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } } // Reset selection when input loses focus searchInput.addEventListener('blur', function () { selectedIndex = -1; services.forEach(service => { service.element.style.outline = ''; }); }); } })();

SHOWCASE

Our Projects

Boost Home Air Quality with Advanced HVAC Solutions

Efficient Down Flow Furnace Installation

Optimize Comfort with Cozy Homes HVAC Solutions

Modern System Upgrade for Enhanced Comfort