Limit actuator picker results

app/static/index.html

@@ -182,6 +182,7 @@ let currentActuatorId = null;
 let actuatorChoices = [];
 let contextOptions = [];
 let manualContextState = {options: [], selected: new Set()};
+const ACTUATOR_RESULT_LIMIT = 50;
 
 async function api(path, options = {}) {
   const response = await fetch(path, {headers: {"Content-Type": "application/json"}, ...options});
@@ -349,14 +350,17 @@ function renderActuatorSelect() {
   const query = normalizedSearch(document.getElementById("actuator-search")?.value || "");
   const filtered = actuatorChoices
     .filter(entity => !domain || entity.domain === domain)
-    .filter(entity => matchesSearch(entity, query))
-    .slice(0, 120);
-  const domains = [...new Set(filtered.map(entity => entity.domain))].sort();
+    .filter(entity => matchesSearch(entity, query));
+  const visible = filtered.slice(0, ACTUATOR_RESULT_LIMIT);
+  const domains = [...new Set(visible.map(entity => entity.domain))].sort();
+  const limitLabel = filtered.length > visible.length
+    ? ` - ${visible.length} von ${filtered.length}; Suche oder Typ weiter eingrenzen`
+    : "";
   select.innerHTML = [
-    `<option value="">${filtered.length ? "Gerät auswählen ..." : "Keine passenden Geräte gefunden"}</option>`,
+    `<option value="">${filtered.length ? `Gerät auswählen${limitLabel}` : "Keine passenden Geräte gefunden"}</option>`,
     ...domains.map(group => `
       <optgroup label="${escapeHtml(actuatorGroupLabel(group))}">
-        ${filtered
+        ${visible
           .filter(entity => entity.domain === group)
           .map(entity => `<option value="${escapeHtml(entity.entity_id)}">${escapeHtml(entityLabel(entity))}</option>`)
           .join("")}