the actual search functionality

Author: VIRUXE

index.html

@@ -28,6 +28,10 @@ <h1>Honda OBD0/1 ECU Component List</h1>
     </header>
     <main>
         <h2>Components</h2>
+        <div id="search-container">
+            <input type="search" id="componentSearch" placeholder="Search components...">
+            <small>Search by ID, type, specs or notes</small>
+        </div>
         <div id="table-container">
             <table>
                 <thead>

script.js

@@ -84,4 +84,15 @@ fetch('./hondaecucomponents.json')
                 credits.appendChild(li);
             });
         }
-    }).catch(err => console.error('Failed to load components:', err));
+    }).catch(err => console.error('Failed to load components:', err));
+
+document.getElementById('componentSearch').addEventListener('input', e => {
+    const searchTerm      = e.target.value.toLowerCase();
+    const componentGroups = document.getElementsByClassName('component-group');
+    
+    Array.from(componentGroups).forEach(tbody => {
+        const searchText = [...Array.from(tbody.querySelector('.component-row').children).map(cell => cell.dataset.original || cell.textContent), tbody.querySelector('.notes-cell')?.textContent || ''].join(' ').toLowerCase();
+
+        tbody.style.display = searchText.includes(searchTerm) ? '' : 'none';
+    });
+});

styles.css

@@ -84,6 +84,8 @@ th {
         position: static;
         text-transform: uppercase;
     }
+
+    #search-container { display: none; }
 }
 
 .component-group {
@@ -142,4 +144,24 @@ th {
 
 .honda-link {
     color: var(--honda-red);
+}
+
+#search-container {
+    margin: 1rem 0;
+}
+
+#componentSearch {
+    width: 100%;
+    max-width: 300px;
+    padding: 0.5rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0.25rem;
+    font-size: 1rem;
+}
+
+#search-container small {
+    display: block;
+    margin-top: 0.25rem;
+    color: #4b5563;
+    font-size: 0.75rem;
 }