Daten via SQL (pw muss in .env eingetragen werden), Erweitert-Modus um nach anderen Feldern zu suchen

public/index.html

@@ -22,6 +22,19 @@
                    aria-expanded="false" aria-controls="suggestions"
                    placeholder="z. B. K-10042 oder Mueller">
             <div class="suggestions" id="suggestions" role="listbox"></div>
+
+            <label class="checkbox-row">
+                <input type="checkbox" id="advancedToggle">
+                Erweitert
+            </label>
+            <div class="field-group" id="advancedFields" role="group" aria-label="Erweiterte Suchfelder" hidden>
+                <button type="button" class="field-toggle" data-field="kugru" aria-pressed="false">Kundengruppe</button>
+                <button type="button" class="field-toggle" data-field="kg_id" aria-pressed="false">Kundengruppen-ID</button>
+                <button type="button" class="field-toggle" data-field="sydat" aria-pressed="false">Erstellt am</button>
+                <button type="button" class="field-toggle" data-field="datlv" aria-pressed="false">Letzte Änderung</button>
+                <button type="button" class="field-toggle" data-field="fibuk" aria-pressed="false">Fibu-Konto</button>
+                <button type="button" class="field-toggle" data-field="ku_id" aria-pressed="false">Kunden-ID (intern)</button>
+            </div>
         </div>
 
         <div class="customer-chip" id="customerChip">

public/index.js

@@ -4,6 +4,9 @@
     const searchInput = document.getElementById("customerSearch");
     const searchWrap = document.getElementById("searchWrap");
     const suggestionsBox = document.getElementById("suggestions");
+    const advancedToggle = document.getElementById("advancedToggle");
+    const advancedFields = document.getElementById("advancedFields");
+    const fieldToggleButtons = Array.from(document.querySelectorAll(".field-toggle"));
     const customerChip = document.getElementById("customerChip");
     const chipNumber = document.getElementById("chipNumber");
     const chipName = document.getElementById("chipName");
@@ -16,8 +19,42 @@
 
     let selectedCustomer = null;
     let currentResults = [];
+    let currentQuery = "";
     let activeIndex = -1;
     let debounceTimer = null;
+    const selectedFields = new Set();
+
+    function appendHighlighted(target, text, query) {
+        const words = (query || "").toLowerCase().split(/\s+/).filter(Boolean);
+        if (words.length === 0) { target.appendChild(document.createTextNode(text)); return; }
+
+        const lowerText = text.toLowerCase();
+        const mask = new Array(text.length).fill(false);
+        for (const word of words) {
+            let fromIndex = 0;
+            let matchIndex;
+            while ((matchIndex = lowerText.indexOf(word, fromIndex)) !== -1) {
+                for (let i = matchIndex; i < matchIndex + word.length; i++) { mask[i] = true; }
+                fromIndex = matchIndex + 1;
+            }
+        }
+
+        let i = 0;
+        while (i < text.length) {
+            const highlighted = mask[i];
+            let j = i;
+            while (j < text.length && mask[j] === highlighted) { j++; }
+            const chunk = text.slice(i, j);
+            if (highlighted) {
+                const strong = document.createElement("strong");
+                strong.textContent = chunk;
+                target.appendChild(strong);
+            } else {
+                target.appendChild(document.createTextNode(chunk));
+            }
+            i = j;
+        }
+    }
 
     function updateSubmitState() {
         const subjectOk = subjectInput.value.trim().length >= 5;
@@ -46,9 +83,9 @@
                 item.innerHTML = "";
                 const numberSpan = document.createElement("span");
                 numberSpan.className = "cnum";
-                numberSpan.textContent = customer.number;
+                appendHighlighted(numberSpan, customer.number, currentQuery);
                 const nameSpan = document.createElement("span");
-                nameSpan.textContent = customer.name;
+                appendHighlighted(nameSpan, customer.name, currentQuery);
                 item.appendChild(numberSpan);
                 item.appendChild(nameSpan);
                 item.addEventListener("click", () => selectCustomer(customer));
@@ -60,8 +97,13 @@
     }
 
     async function runSearch(query) {
+        currentQuery = query;
         try {
-            const response = await fetch("/api/customers?search=" + encodeURIComponent(query));
+            const params = new URLSearchParams({ search: query });
+            if (advancedToggle.checked && selectedFields.size > 0) {
+                params.set("fields", Array.from(selectedFields).join(","));
+            }
+            const response = await fetch("/api/customers?" + params.toString());
             const payload = await response.json();
             currentResults = payload.results;
             activeIndex = currentResults.length > 0 ? 0 : -1;
@@ -123,6 +165,25 @@
         if (!searchWrap.contains(event.target)) { closeSuggestions(); }
     });
 
+    advancedToggle.addEventListener("change", () => {
+        advancedFields.hidden = !advancedToggle.checked;
+        if (!advancedToggle.checked) {
+            selectedFields.clear();
+            fieldToggleButtons.forEach((button) => button.setAttribute("aria-pressed", "false"));
+        }
+        if (currentQuery.length >= 2) { runSearch(currentQuery); }
+    });
+
+    fieldToggleButtons.forEach((button) => {
+        button.addEventListener("click", () => {
+            const field = button.dataset.field;
+            const isPressed = button.getAttribute("aria-pressed") === "true";
+            button.setAttribute("aria-pressed", String(!isPressed));
+            if (isPressed) { selectedFields.delete(field); } else { selectedFields.add(field); }
+            if (currentQuery.length >= 2) { runSearch(currentQuery); }
+        });
+    });
+
     chipReset.addEventListener("click", resetCustomer);
     subjectInput.addEventListener("input", updateSubmitState);
 

public/styles.css

@@ -174,6 +174,55 @@ textarea {
     font-size: 0.9rem;
 }
 
+.checkbox-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 14px 0 0;
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.checkbox-row input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+    accent-color: var(--accent);
+    cursor: pointer;
+}
+
+.field-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 10px;
+}
+
+.field-group[hidden] {
+    display: none;
+}
+
+.field-toggle {
+    font: inherit;
+    font-size: 0.85rem;
+    padding: 6px 12px;
+    border: 1px solid var(--line);
+    border-radius: 999px;
+    background: var(--surface);
+    color: var(--ink-soft);
+    cursor: pointer;
+}
+
+.field-toggle:hover {
+    border-color: var(--accent);
+}
+
+.field-toggle[aria-pressed="true"] {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: #fff;
+}
+
 /* Gewaehlter Kunde als Chip */
 .customer-chip {
     display: none;