Mosso setasearch + display none bottoni + fix grafica ricerca + novità

seta_menu/js_menu/setasearch.js

@@ -0,0 +1,52 @@
+const searchBar = document.getElementById('searchBar');
+const productsContainer = document.getElementById('bus-container');
+const buttons = document.getElementById('buttons');
+
+let allProducts = [];
+window.onbeforeunload=searchBar.value="";
+
+const url = '/seta_menu/js_menu/setabus.json';
+fetch(url)
+    .then(response => {
+        if (!response.ok) throw new Error("Errore nel caricamento dei dati.");
+        return response.json();
+    })
+    .then(data => {
+        allProducts = data;
+    })
+    .catch(error => console.error('Errore nel caricamento dei dati:', error));
+
+searchBar.addEventListener('input', () => {
+    if (searchBar.value == '') {
+        productsContainer.innerHTML = '';
+        buttons.style.display="";
+        return;
+    }
+    buttons.style.display="none";
+    const searchTerm = searchBar.value.toLowerCase();
+    const filtered = allProducts.filter(bus => bus.matricola.toLowerCase().includes(searchTerm))
+    .sort((a, b) => {
+        const aStartsWith = a.matricola.toLowerCase().startsWith(searchTerm);
+        const bStartsWith = b.matricola.toLowerCase().startsWith(searchTerm);
+        if (aStartsWith && !bStartsWith) return -1;
+        if (!aStartsWith && bStartsWith) return 1;
+        return 0; // keep original order if both or neither match at start
+    });
+    renderProducts(filtered);
+});
+
+function renderProducts(products) {
+    productsContainer.innerHTML = '';
+    products.forEach(bus => {
+        const div = document.createElement('div');
+        div.className = 'product-card';
+        div.innerHTML = `
+            <a href="${bus.link}">
+                <h3>${bus.matricola}</h3>
+                <p>${bus.modello}</p>
+                <p>${bus.settore}</p>
+            </a>
+        `;
+        productsContainer.appendChild(div);
+    });
+}

seta_menu/seta.html

@@ -22,10 +22,8 @@
       </nav>
     </header>
     <h1>SETA Modena</h1>
-    <div class="verticale">
-      <input type="text" id="searchBar" placeholder="Cerca una matricola...">
-      <div id="bus-container"></div>
-    </div>
+    <input type="text" id="searchBar" placeholder="Cerca una matricola...">
+    <div id="bus-container"></div>
     <br>
     <div id="buttons">
       <div>
@@ -57,6 +55,6 @@
       </div>
     </div>
     <div style="height: 65px;"></div>
-    <script src="/scripts/setasearch.js"></script>
+    <script src="/seta_menu/js_menu/setasearch.js"></script>
   </body>
 </html>