Started adding advanced search

2026-04-28 15:09:56 -05:00
parent fcaa15bf6e
commit b8c477a59c
5 changed files with 665 additions and 0 deletions
@@ -1445,3 +1445,321 @@ function navigateToHistory(index) {

 // Start the quiz when page loads
 window.addEventListener('DOMContentLoaded', init);
+
+// ===== SEARCH BAR FUNCTIONALITY =====
+
+// Search state variables
+let searchMatches = [];
+let selectedSearchIndex = -1;
+
+// Toggle search bar visibility based on current screen
+function toggleSearchBar() {
+    const searchContainer = document.getElementById('searchContainer');
+    const currentKey = history.length > 0 ? history[history.length - 1] : 'start';
+    
+    if (currentKey === 'start') {
+        searchContainer.style.display = 'block';
+    } else {
+        searchContainer.style.display = 'none';
+        // Clear search when hiding
+        clearSearch();
+    }
+}
+
+// Clear search state
+function clearSearch() {
+    const searchInput = document.getElementById('searchInput');
+    const searchDropdown = document.getElementById('searchDropdown');
+    const viewBtn = document.getElementById('viewBtn');
+    
+    if (searchInput) searchInput.value = '';
+    if (searchDropdown) {
+        searchDropdown.style.display = 'none';
+        searchDropdown.innerHTML = '';
+    }
+    if (viewBtn) viewBtn.disabled = true;
+    
+    searchMatches = [];
+    selectedSearchIndex = -1;
+}
+
+// Filter products by search term
+function filterProductsBySearch(searchTerm) {
+    if (!searchTerm || searchTerm.trim().length < 2) {
+        return [];
+    }
+    
+    const term = searchTerm.toLowerCase().trim();
+    
+    return productData.filter(product => {
+        const description = (product.description || '').toLowerCase();
+        const productCode = (product.productCode || '').toLowerCase();
+        const category = (product.category || '').toLowerCase();
+        const baseType = (product.baseType || '').toLowerCase();
+        const subTypeWindow = (product.subType?.window || '').toLowerCase();
+        const subTypeDoor = (product.subType?.door || '').toLowerCase();
+        
+        return description.includes(term) ||
+               productCode.includes(term) ||
+               category.includes(term) ||
+               baseType.includes(term) ||
+               subTypeWindow.includes(term) ||
+               subTypeDoor.includes(term);
+    });
+}
+
+// Update search dropdown with matches
+function updateSearchDropdown(matches) {
+    const dropdown = document.getElementById('searchDropdown');
+    const viewBtn = document.getElementById('viewBtn');
+    
+    if (!matches || matches.length === 0) {
+        dropdown.style.display = 'none';
+        dropdown.innerHTML = '';
+        viewBtn.disabled = true;
+        selectedSearchIndex = -1;
+        return;
+    }
+    
+    // Show only first 10 matches
+    const displayMatches = matches.slice(0, 10);
+    
+    dropdown.innerHTML = displayMatches.map((product, index) => {
+        const prodCode = product.productCode || product.id;
+        const desc = product.description || 'No description';
+        const isSelected = index === selectedSearchIndex ? 'selected' : '';
+        
+        return `
+            <div class="search-dropdown-item ${isSelected}" 
+                 data-index="${index}" 
+                 data-product-code="${prodCode}"
+                 onclick="selectSearchItem(${index})">
+                <div class="search-dropdown-item-title">${desc}</div>
+                <div class="search-dropdown-item-code">${prodCode}</div>
+            </div>
+        `;
+    }).join('');
+    
+    if (matches.length > 10) {
+        dropdown.innerHTML += `
+            <div class="search-dropdown-item" style="font-style: italic; color: #999; cursor: pointer;"
+                 onclick="handleSearchResults()">
+                + ${matches.length - 10} more results... (click to view all)
+            </div>
+        `;
+    }
+    
+    dropdown.style.display = 'block';
+}
+
+// Select a search item
+function selectSearchItem(index, closeDropdown = true) {
+    selectedSearchIndex = index;
+    const viewBtn = document.getElementById('viewBtn');
+    const searchInput = document.getElementById('searchInput');
+    const searchDropdown = document.getElementById('searchDropdown');
+    
+    viewBtn.disabled = false;
+    
+    // Update search input with selected product description
+    if (searchMatches[index]) {
+        const selectedProduct = searchMatches[index];
+        const desc = selectedProduct.description || selectedProduct.DESCRIPTION || 'No description';
+        searchInput.value = desc;
+    }
+    
+    // Hide dropdown after selection (unless using keyboard navigation)
+    if (closeDropdown) {
+        searchDropdown.style.display = 'none';
+    }
+    
+    // Update visual selection
+    const items = document.querySelectorAll('.search-dropdown-item');
+    items.forEach((item, i) => {
+        if (i === index) {
+            item.classList.add('selected');
+        } else {
+            item.classList.remove('selected');
+        }
+    });
+}
+
+// Handle View button click
+function handleViewProduct() {
+    if (selectedSearchIndex >= 0 && selectedSearchIndex < searchMatches.length) {
+        const product = searchMatches[selectedSearchIndex];
+        const prodCode = product.productCode || product.id;
+        
+        // Clear search and hide dropdown
+        clearSearch();
+        
+        // Navigate to product
+        showProductByCode(prodCode);
+    }
+}
+
+// Handle Search button click (show results grid)
+function handleSearchResults() {
+    const searchInput = document.getElementById('searchInput');
+    const searchTerm = searchInput.value.trim();
+    
+    if (!searchTerm || searchTerm.length < 2) {
+        alert('Please enter at least 2 characters to search.');
+        return;
+    }
+    
+    const matches = filterProductsBySearch(searchTerm);
+    
+    if (matches.length === 0) {
+        alert('No products found matching "' + searchTerm + '".');
+        return;
+    }
+    
+    // Store search results temporarily
+    searchMatches = matches;
+    
+    // Clear search UI
+    clearSearch();
+    
+    // Display results in grid format (similar to showFilteredProducts)
+    showSearchResultsGrid(matches, searchTerm);
+}
+
+// Show search results in a grid
+function showSearchResultsGrid(matches, searchTerm) {
+    const contentDiv = document.getElementById('content');
+    
+    let html = `
+        <div class="result-container">
+            <div class="result-title">Found ${matches.length} Product${matches.length > 1 ? 's' : ''}</div>
+            <div class="result-details">
+                <p style="margin-bottom: 20px;">Search results for: <strong>"${searchTerm}"</strong></p>
+            </div>
+            <div class="products-grid">
+    `;
+    
+    matches.forEach(product => {
+        const prodCode = product.productCode || product.id;
+        const desc = product.description || product.DESCRIPTION || 'No description';
+        const materials = product.materials ? product.materials.join(', ') : 'N/A';
+        const colors = product.colors ? product.colors.join(', ') : 'N/A';
+        const baseType = product.baseType || 'N/A';
+        const subType = product.subType?.window || product.subType?.door || 'N/A';
+        
+        html += `
+            <div class="product-card" onclick="showProductByCode('${prodCode}')">
+                <h3>${desc}</h3>
+                <p style="color: #999; font-size: 0.95em; margin-top: 5px;">${prodCode}</p>
+                <div style="font-size: 0.9em; color: #666; margin-top: 10px;">
+                    <strong>Type:</strong> ${baseType}${subType !== 'N/A' ? ' - ' + subType : ''}<br>
+                    <strong>Materials:</strong> ${materials}<br>
+                    <strong>Colors:</strong> ${colors}
+                </div>
+            </div>
+        `;
+    });
+    
+    html += `
+            </div>
+            <div class="result-actions">
+                <button class="back-button" onclick="startOver()">← Back to Start</button>
+                <button class="back-button" onclick="shareCurrentPage()">🔗 Share</button>
+            </div>
+        </div>
+    `;
+    
+    contentDiv.innerHTML = html;
+    
+    // Update history to track search results
+    history.push('search-results');
+    updateBreadcrumb();
+}
+
+// Handle Advanced Search button click
+function handleAdvancedSearch() {
+    // Navigate to advanced search page
+    window.location.href = '/quiz/advanced-search';
+}
+
+// Set up search input event listeners
+function initSearchBar() {
+    const searchInput = document.getElementById('searchInput');
+    const searchDropdown = document.getElementById('searchDropdown');
+    
+    if (!searchInput) return;
+    
+    // Input event for real-time filtering
+    searchInput.addEventListener('input', function(e) {
+        const searchTerm = e.target.value.trim();
+        
+        if (searchTerm.length < 2) {
+            searchMatches = [];
+            updateSearchDropdown([]);
+            return;
+        }
+        
+        searchMatches = filterProductsBySearch(searchTerm);
+        updateSearchDropdown(searchMatches);
+        
+        // Reset selection
+        selectedSearchIndex = -1;
+        document.getElementById('viewBtn').disabled = true;
+    });
+    
+    // Keyboard navigation (arrow keys and enter)
+    searchInput.addEventListener('keydown', function(e) {
+        if (searchMatches.length === 0) return;
+        
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            selectedSearchIndex = Math.min(selectedSearchIndex + 1, searchMatches.length - 1);
+            updateSearchDropdown(searchMatches);
+            selectSearchItem(selectedSearchIndex, false); // Keep dropdown open
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            selectedSearchIndex = Math.max(selectedSearchIndex - 1, -1);
+            if (selectedSearchIndex >= 0) {
+                updateSearchDropdown(searchMatches);
+                selectSearchItem(selectedSearchIndex, false); // Keep dropdown open
+            } else {
+                document.getElementById('viewBtn').disabled = true;
+            }
+        } else if (e.key === 'Enter') {
+            e.preventDefault();
+            if (selectedSearchIndex >= 0) {
+                handleViewProduct();
+            } else {
+                handleSearchResults();
+            }
+        } else if (e.key === 'Escape') {
+            clearSearch();
+        }
+    });
+    
+    // Click outside to close dropdown
+    document.addEventListener('click', function(e) {
+        if (!searchInput.contains(e.target) && !searchDropdown.contains(e.target)) {
+            searchDropdown.style.display = 'none';
+        }
+    });
+}
+
+// Override loadContent to toggle search bar
+const originalLoadContent = loadContent;
+loadContent = function(key) {
+    originalLoadContent(key);
+    toggleSearchBar();
+};
+
+// Override startOver to show search bar
+const originalStartOver = startOver;
+startOver = function() {
+    originalStartOver();
+    toggleSearchBar();
+};
+
+// Initialize search bar when page loads
+window.addEventListener('DOMContentLoaded', function() {
+    initSearchBar();
+    toggleSearchBar();
+});