Added Search function for items and fixed javascript controller

app/javascript/controllers/scanner_controller.js

@@ -1,49 +1,58 @@
-import { Controller } from "@hotwire/stimulus"
+import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
-  static targets = [ "input", "preview", "modal" ]
+  static targets = ["input", "preview", "modal"];
 
   connect() {
-    this.html5QrCode = null
+    this.html5QrCode = null;
   }
 
   // Öffnet das Modal und startet den Kamera-Stream
   startCamera(event) {
-    event.preventDefault()
-    
+    event.preventDefault();
+
     // Modal anzeigen
-    this.modalTarget.classList.remove("hidden")
+    this.modalTarget.classList.remove("hidden");
 
     // Neue Instanz auf dem Preview-Div mit der ID des Elements erzeugen
-    this.html5QrCode = new Html5Qrcode(this.previewTarget.id)
+    this.html5QrCode = new Html5Qrcode(this.previewTarget.id);
 
     // FPS-Rate und Scan-Rahmen (250x250px) festlegen
-    const config = { fps: 10, qrbox: { width: 250, height: 250 } }
+    const config = { fps: 10, qrbox: { width: 250, height: 250 } };
 
-    this.html5QrCode.start(
-      { facingMode: "environment" }, // Erzwingt die rückseitige Hauptkamera bei Handys
-      config,
-      (decodedText, decodedResult) => {
-        // SUCCESS: Code erkannt!
-        this.inputTarget.value = decodedText // Trägt die ID (z.B. 10024) ins Textfeld ein
-        this.stopCamera()                     // Stoppt die Kamera und schließt das Fenster
-      },
-      (errorMessage) => {
-        // Kontinuierlicher Scan-Loop (Fehler ignorieren, wenn kein QR-Code im Bild ist)
-      }
-    ).catch((err) => {
-      console.error("Kamera-Zugriff verweigert oder blockiert:", err)
-    })
+    this.html5QrCode
+      .start(
+        { facingMode: "environment" }, // Erzwingt die rückseitige Hauptkamera bei Handys
+        config,
+        (decodedText, decodedResult) => {
+          // SUCCESS: Code erkannt!
+          this.inputTarget.value = decodedText; // Trägt die ID (z.B. 10024) ins Textfeld ein
+
+          // NEU: Simuliert das Tippen, damit dein search-form Controller die Live-Suche sofort startet!
+          this.inputTarget.dispatchEvent(new Event("input", { bubbles: true }));
+
+          this.stopCamera(); // Stoppt die Kamera und schließt das Fenster
+        },
+        (errorMessage) => {
+          // Kontinuierlicher Scan-Loop (Fehler ignorieren, wenn kein QR-Code im Bild ist)
+        },
+      )
+      .catch((err) => {
+        console.error("Kamera-Zugriff verweigert oder blockiert:", err);
+      });
   }
 
   // Schließt das Modal und beendet den Stream sauber
   stopCamera() {
     if (this.html5QrCode && this.html5QrCode.isScanning) {
-      this.html5QrCode.stop().then(() => {
-        this.modalTarget.classList.add("hidden")
-      }).catch((err) => console.error("Fehler beim Beenden des Streams:", err))
+      this.html5QrCode
+        .stop()
+        .then(() => {
+          this.modalTarget.classList.add("hidden");
+        })
+        .catch((err) => console.error("Fehler beim Beenden des Streams:", err));
     } else {
-      this.modalTarget.classList.add("hidden")
+      this.modalTarget.classList.add("hidden");
     }
   }
 }