Group the condition types and make it possible to open/close the groups in the input field.

Author: Cyperghost

com.woltlab.wcf/templates/shared_categorizedSingleSelectionFormField.tpl

@@ -0,0 +1,40 @@
+<script data-relocate="true">
+	{jsphrase name='wcf.global.filter.button.visibility'}
+	{jsphrase name='wcf.global.filter.button.clear'}
+	{jsphrase name='wcf.global.filter.error.noMatches'}
+	{jsphrase name='wcf.global.filter.placeholder'}
+	{jsphrase name='wcf.global.filter.visibility.activeOnly'}
+	{jsphrase name='wcf.global.filter.visibility.highlightActive'}
+	{jsphrase name='wcf.global.filter.visibility.showAll'}
+
+	require(['WoltLabSuite/Core/Component/ItemList/Categorized'], ({ CategorizedItemList  }) => {
+		new CategorizedItemList('{unsafe:$field->getPrefixedId()|encodeJS}_list');
+	});
+</script>
+
+<div class="itemListFilter" id="{$field->getPrefixedId()}_list">
+	<div class="inputAddon">
+		<input type="text" class="long" placeholder="{lang}wcf.global.filter.placeholder{/lang}" />
+		<button type="button" class="button clearButton inputSuffix disabled jsTooltip" title="{lang}wcf.global.filter.button.clear{/lang}">{icon name="xmark" solid=true}</button>
+	</div>
+	<ul class="scrollableCheckboxList">
+		{foreach from=$field->getNestedOptions() item=__fieldNestedOption}
+			<li{if $__fieldNestedOption[depth] > 0} style="padding-left: {$__fieldNestedOption[depth]*20}px"{/if}{if !$__fieldNestedOption[isSelectable]} data-open="true"{/if}>
+				{if $__fieldNestedOption[isSelectable]}
+					<label>
+						<input {*
+							*}type="radio" {*
+							*}name="{$field->getPrefixedId()}" {*
+							*}value="{$__fieldNestedOption[value]}"{*
+							*}{if !$field->getFieldClasses()|empty} class="{implode from=$field->getFieldClasses() item='class' glue=' '}{$class}{/implode}"{/if}{*
+							*}{if $field->getValue() == $__fieldNestedOption[value] && $__fieldNestedOption[isSelectable]} checked{/if}{*
+							*}{if $field->isImmutable()} disabled{/if}{*
+						*}> <span>{unsafe:$__fieldNestedOption[label]}</span>
+					</label>
+				{else}
+					<button type="button" class="pointer">{icon name="chevron-down"} {unsafe:$__fieldNestedOption[label]}</button>
+				{/if}
+			</li>
+		{/foreach}
+	</ul>
+</div>

ts/WoltLabSuite/Core/Component/ItemList/Categorized.ts

@@ -0,0 +1,182 @@
+/**
+ * Provides a filter input for a categorized item list.
+ *
+ * @author Olaf Braun
+ * @copyright 2001-2025 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @sice 6.3
+ */
+
+import { innerError, show, hide, isHidden } from "WoltLabSuite/Core/Dom/Util";
+import { getPhrase } from "WoltLabSuite/Core/Language";
+import { escapeRegExp } from "WoltLabSuite/Core/StringUtil";
+
+interface Item {
+  element: HTMLLIElement;
+  span: HTMLSpanElement;
+  text: string;
+}
+
+interface Category {
+  items: Item[];
+  element: HTMLLIElement;
+}
+
+export class CategorizedItemList {
+  #container: HTMLElement;
+  #elementList: HTMLUListElement;
+  #input: HTMLInputElement;
+  #value: string = "";
+  #clearButton: HTMLButtonElement;
+  #categories: Category[] = [];
+  #fragment: DocumentFragment;
+
+  constructor(elementId: string) {
+    this.#fragment = document.createDocumentFragment();
+
+    const container = document.getElementById(elementId);
+    if (!container) {
+      throw new Error(`Element with ID ${elementId} not found.`);
+    }
+
+    this.#container = container;
+    this.#elementList = this.#container.querySelector<HTMLUListElement>(".scrollableCheckboxList")!;
+
+    this.#input = this.#container.querySelector(".inputAddon > input") as HTMLInputElement;
+    this.#input.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+      }
+    });
+    this.#input.addEventListener("keyup", () => this.#keyup());
+
+    this.#clearButton = this.#container.querySelector<HTMLButtonElement>(".inputAddon > .clearButton")!;
+    this.#clearButton.addEventListener("click", (event) => {
+      event.preventDefault();
+
+      this.#input.value = "";
+      this.#keyup();
+    });
+
+    this.#buildItemMap();
+  }
+
+  #buildItemMap(): void {
+    let category: Category | null = null;
+    for (const li of this.#elementList.querySelectorAll<HTMLLIElement>(":scope > li")) {
+      const input = li.querySelector('input[type="radio"]');
+      if (input) {
+        if (!category) {
+          throw new Error("Input found without a preceding category.");
+        }
+
+        category.items.push({
+          element: li,
+          span: li.querySelector<HTMLSpanElement>("span")!,
+          text: li.innerText.trim(),
+        });
+      } else {
+        const items: Item[] = [];
+        category = {
+          items: items,
+          element: li,
+        };
+        this.#categories.push(category);
+
+        li.addEventListener("click", (event) => {
+          this.#categoryClick(event, li, items);
+        });
+      }
+    }
+  }
+
+  #categoryClick(event: MouseEvent, li: HTMLLIElement, items: Item[]): void {
+    event.preventDefault();
+
+    const isOpen = !this.#categoryIsOpen(li);
+    li.dataset.open = isOpen ? "true" : "false";
+
+    li.querySelector<FaIcon>("fa-icon")!.setIcon(isOpen ? "chevron-down" : "chevron-right");
+
+    this.#showItems({
+      items: items,
+      element: li,
+    });
+  }
+
+  #categoryIsOpen(category: HTMLLIElement): boolean {
+    return category.dataset.open === "true";
+  }
+
+  #keyup(): void {
+    const value = this.#input.value.trim();
+    if (this.#value === value) {
+      return;
+    }
+
+    this.#value = value;
+
+    if (this.#value) {
+      this.#clearButton.classList.remove("disabled");
+    } else {
+      this.#clearButton.classList.add("disabled");
+    }
+
+    // move list into fragment before editing items, increases performance
+    // by avoiding the browser to perform repaint/layout over and over again
+    this.#fragment.appendChild(this.#elementList);
+
+    this.#categories.forEach((category) => {
+      this.#showItems(category);
+    });
+
+    const hasVisibleItems = Array.from(
+      this.#elementList.querySelectorAll<HTMLLIElement>(".scrollableCheckboxList > li"),
+    ).some((li) => {
+      return !isHidden(li);
+    });
+
+    this.#container.insertAdjacentElement("beforeend", this.#elementList);
+
+    innerError(this.#container, hasVisibleItems ? false : getPhrase("wcf.global.filter.error.noMatches"));
+  }
+
+  #showItems(category: Category): void {
+    const categoryIsOpen = this.#categoryIsOpen(category.element);
+    const regexp = new RegExp("(" + escapeRegExp(this.#value) + ")", "i");
+
+    if (this.#value === "") {
+      show(category.element);
+
+      category.items.forEach((item) => {
+        item.span.innerHTML = item.text; // Reset highlighting
+
+        if (categoryIsOpen) {
+          show(item.element);
+        } else {
+          hide(item.element);
+        }
+      });
+    } else {
+      if (category.items.some((item) => regexp.test(item.text))) {
+        show(category.element);
+
+        category.items.forEach((item) => {
+          if (categoryIsOpen && regexp.test(item.text)) {
+            item.span.innerHTML = item.text.replace(regexp, "<u>$1</u>");
+
+            show(item.element);
+          } else {
+            hide(item.element);
+          }
+        });
+      } else {
+        hide(category.element);
+
+        category.items.forEach((item) => {
+          hide(item.element);
+        });
+      }
+    }
+  }
+}