${search}

${btnAll}

${btnNone}

${checkboxes}

`; // Update the display whenever the value changes Object.defineProperty(component, "value", { get() { return selectedToArray(); }, set(v) { selectedFromArray(v); } }); function updateValueFromSelected() { checkboxes.value = selectedToArray(); if (debug) console.log("searchCheckboxes", checkboxes.value); output.innerHTML = `(${countSelected()} of ${data.length} selected)`; component.dispatchEvent(new Event("input", { bubbles: true })); // inocuous change to recompute layout. Necesary when the format funtion sets max-height for example component.style.zIndex = 1; } btnAll.addEventListener("click", () => { changeSome(search.value, true); updateValueFromSelected(); }); btnNone.addEventListener("click", () => { changeSome(search.value, false); updateValueFromSelected(); }); component.value = selectedToArray(); search.addEventListener("input", (evt) => { // Hide all the checkboxes that aren't in the searchbox result for (let check of checkboxes.querySelectorAll("input")) { if (search.value.includes(data[+check.value])) { check.parentElement.style.display = "inline-flex"; } else { check.parentElement.style.display = "none"; } } // We don't really need to update when value when searching // component.dispatchEvent(new Event("input", { bubbles: true })); }); checkboxes.addEventListener("input", (evt) => { // avoids duplicated events evt.stopPropagation(); selectedFromArray(checkboxes.value); updateValueFromSelected(); }); return component; }