Move setting search to built-in functionality

public/scripts/setting-search.js

@@ -0,0 +1,54 @@
+/**
+ * Search for settings that match the search string and highlight them.
+ */
+async function searchSettings() {
+    removeHighlighting(); // Remove previous highlights
+    const searchString = String($("#settingsSearch").val());
+    const searchableText = $("#user-settings-block-content"); // Get the HTML block
+    if (searchString.trim() !== "") {
+        highlightMatchingElements(searchableText[0], searchString); // Highlight matching elements
+    }
+}
+
+/**
+ * Check if the element is a child of a header element
+ * @param {HTMLElement | Text | Document | Comment} element Settings block HTML element
+ * @returns {boolean} True if the element is a child of a header element, false otherwise
+ */
+function isParentHeader(element) {
+    return $(element).closest('h4, h3').length > 0;
+}
+
+/**
+ * Recursively highlight elements that match the search string
+ * @param {HTMLElement | Text | Document | Comment} element Settings block HTML element
+ * @param {string} searchString Search string
+ */
+function highlightMatchingElements(element, searchString) {
+    $(element).contents().each(function () {
+        const isTextNode = this.nodeType === Node.TEXT_NODE;
+        const isElementNode = this.nodeType === Node.ELEMENT_NODE;
+
+        if (isTextNode && this.nodeValue.trim() !== "" && !isParentHeader(this)) {
+            const parentElement = $(this).parent();
+            const elementText = this.nodeValue;
+
+            if (elementText.toLowerCase().includes(searchString.toLowerCase())) {
+                parentElement.addClass('highlighted'); // Add CSS class to highlight matched elements
+            }
+        } else if (isElementNode && !$(this).is("h4")) {
+            highlightMatchingElements(this, searchString);
+        }
+    });
+}
+
+/**
+ * Remove highlighting from previously highlighted elements.
+ */
+function removeHighlighting() {
+    $(".highlighted").removeClass("highlighted");  // Remove CSS class from previously highlighted elements
+}
+
+jQuery(() => {
+    $('#settingsSearch').on('input change', searchSettings);
+});