Implement car search functionality in index.html and enhance dropdown behavior in script.js. Added a search input for vehicle models, allowing users to filter options dynamically. Improved dropdown styling and interaction, including closing behavior and handling double-click selections.

2026-03-06 11:06:21 +01:00 · 2025-06-04 14:04:15 +02:00
parent bd3333b8a3
commit bd25635095
2 changed files with 462 additions and 337 deletions
--- a/index.html
+++ b/index.html
@@ -185,6 +185,8 @@
                        </div>
                        <div class="mb-3">
                            <label for="car" class="form-label text-gray-300">Voertuig</label>
+                            <div class="relative">
+                                <input type="text" id="carSearch" class="form-control bg-gray-700 border-gray-600 text-white focus:ring-2 focus:ring-red-500 transition-all duration-300 mb-2" placeholder="Zoek je voertuigmodel...">
                                <select class="form-control bg-gray-700 border-gray-600 text-white focus:ring-2 focus:ring-red-500 transition-all duration-300" id="car" name="car" required>
                                    <option value="" disabled selected>Selecteer uw voertuigmodel</option>
                                    <optgroup label="BMW">
@@ -517,6 +519,7 @@
                                    </optgroup>
                                </select>
                            </div>
+                        </div>
                        <div class="mb-3">
                            <label for="message" class="form-label text-gray-300">Bericht</label>
                            <textarea class="form-control bg-gray-700 border-gray-600 text-white focus:ring-2 focus:ring-red-500 transition-all duration-300" id="message" name="message" rows="4" required></textarea>
--- a/js/script.js
+++ b/js/script.js
@@ -3,6 +3,124 @@ document.addEventListener('DOMContentLoaded', () => {
    const pageSections = document.querySelectorAll('section');
    pageSections.forEach(section => section.classList.add('fade-in'));

+    // Car search functionality
+    const carSearch = document.getElementById('carSearch');
+    const carSelect = document.getElementById('car');
+    
+    if (carSearch && carSelect) {
+        // Set initial dropdown style
+        carSelect.size = 10;
+        carSelect.style.position = 'absolute';
+        carSelect.style.width = '100%';
+        carSelect.style.zIndex = '1000';
+        carSelect.style.backgroundColor = '#374151';
+        carSelect.style.border = '1px solid #4B5563';
+        carSelect.style.borderRadius = '0.375rem';
+        carSelect.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)';
+        carSelect.style.maxHeight = '300px';
+        carSelect.style.overflowY = 'auto';
+
+        // Function to close dropdown
+        const closeDropdown = () => {
+            carSelect.size = 1;
+            carSelect.style.position = 'static';
+            carSelect.style.width = 'auto';
+            carSelect.style.zIndex = 'auto';
+            carSelect.style.backgroundColor = '';
+            carSelect.style.border = '';
+            carSelect.style.borderRadius = '';
+            carSelect.style.boxShadow = '';
+            carSelect.style.maxHeight = '';
+            carSelect.style.overflowY = '';
+        };
+
+        carSearch.addEventListener('input', (e) => {
+            const searchTerm = e.target.value.toLowerCase().trim();
+            const options = carSelect.querySelectorAll('option');
+            const optgroups = carSelect.querySelectorAll('optgroup');
+            
+            // First hide all options and optgroups
+            options.forEach(option => {
+                if (option.value !== '') { // Don't hide the placeholder
+                    option.style.display = 'none';
+                }
+            });
+            optgroups.forEach(group => {
+                group.style.display = 'none';
+            });
+            
+            // If search is empty, show all options
+            if (searchTerm === '') {
+                options.forEach(option => {
+                    option.style.display = '';
+                });
+                optgroups.forEach(group => {
+                    group.style.display = '';
+                });
+                return;
+            }
+            
+            // Show matching options and their parent optgroups
+            let hasMatches = false;
+            options.forEach(option => {
+                if (option.value !== '') {
+                    const optionText = option.text.toLowerCase();
+                    if (optionText.includes(searchTerm)) {
+                        option.style.display = '';
+                        hasMatches = true;
+                        // Show the parent optgroup
+                        const parentGroup = option.closest('optgroup');
+                        if (parentGroup) {
+                            parentGroup.style.display = '';
+                        }
+                    }
+                }
+            });
+            
+            // If no matches found, show the "Ander model" option
+            if (!hasMatches) {
+                const otherModelOption = carSelect.querySelector('option[value="Ander model"]');
+                if (otherModelOption) {
+                    otherModelOption.style.display = '';
+                    const parentGroup = otherModelOption.closest('optgroup');
+                    if (parentGroup) {
+                        parentGroup.style.display = '';
+                    }
+                }
+            }
+        });
+        
+        // Handle option selection
+        carSelect.addEventListener('change', () => {
+            carSearch.value = '';
+            const options = carSelect.querySelectorAll('option');
+            const optgroups = carSelect.querySelectorAll('optgroup');
+            options.forEach(option => {
+                option.style.display = '';
+            });
+            optgroups.forEach(group => {
+                group.style.display = '';
+            });
+            closeDropdown();
+        });
+
+        // Handle double-click on options
+        carSelect.addEventListener('dblclick', (e) => {
+            if (e.target.tagName === 'OPTION' && e.target.value !== '') {
+                carSelect.value = e.target.value;
+                carSearch.value = e.target.text;
+                closeDropdown();
+            }
+        });
+
+        // Close the dropdown when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!carSearch.contains(e.target) && !carSelect.contains(e.target)) {
+                closeDropdown();
+            }
+        });
+    }
+
    // Smooth scrolling for navigation links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
@@ -13,11 +131,9 @@ document.addEventListener('DOMContentLoaded', () => {
    });

    // Get Started button functionality
-    const getStartedButtons = document.querySelectorAll('.btn-primary');
+    const getStartedButtons = document.querySelectorAll('.btn-primary:not([type="submit"])');
    getStartedButtons.forEach(button => {
        button.addEventListener('click', (e) => {
-            // Prevent modal from opening if this is the form submit button
-            if (button.type === 'submit' || button.closest('form')) return;
            // Create and show modal
            const modal = document.createElement('div');
            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 fade-in';
@@ -29,10 +145,10 @@ document.addEventListener('DOMContentLoaded', () => {
                        <button class="w-full btn btn-primary bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 transition-all duration-300">
                            ECU Tuning
                        </button>
-                        <button class="w-full btn btn-outline-secondary hover:bg-gradient-to-r hover:from-red-600 hover:to-orange-600 hover:text-white transition-all duration-300">
+                        <button class="w-full btn btn-primary bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 transition-all duration-300">
                            Prestatie Onderdelen
                        </button>
-                        <button class="w-full btn btn-outline-secondary hover:bg-gradient-to-r hover:from-red-600 hover:to-orange-600 hover:text-white transition-all duration-300">
+                        <button class="w-full btn btn-primary bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 transition-all duration-300">
                            Maatwerk Pakket
                        </button>
                    </div>
@@ -45,6 +161,9 @@ document.addEventListener('DOMContentLoaded', () => {
            `;
            document.body.appendChild(modal);

+            // DEBUG: Log modal HTML
+            console.log('Modal created. innerHTML:', modal.innerHTML);
+
            // Add click event to close modal when clicking outside
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
@@ -53,10 +172,13 @@ document.addEventListener('DOMContentLoaded', () => {
            });

            // Add click events to modal buttons
-            const modalButtons = modal.querySelectorAll('button:not(:last-child)');
+            const modalButtons = modal.querySelectorAll('.space-y-4 > button');
+            // DEBUG: Log number of modal buttons found
+            console.log('Modal buttons found:', modalButtons.length);
            modalButtons.forEach(modalBtn => {
                modalBtn.addEventListener('click', () => {
                    const action = modalBtn.textContent.trim();
+                    console.log('Modal button clicked:', action); // DEBUG
                    // Scroll to contact form and populate service type
                    const contactForm = document.querySelector('#contact form, #contactForm');
                    const messageField = contactForm.querySelector('#message');