Add to settings field and mark for select section by part of handle

src/templates/_components/fields/section/_settings.twig

@@ -20,6 +20,16 @@
 
 <hr>
 
+{{ forms.textField({
+    id: 'searchInput',
+    label : 'Select Section By Text In Handle' | t('section-and-product-type'),
+    instructions : 'This will allow to select all section by text in handle.' | t('section-and-product-type'),
+    name : 'partOfHandle',
+    value: partOfHandle,
+}) }}
+
+<hr>
+
 {{ forms.checkboxGroupField({
     label : 'Allowed Sections' | t('section-and-product-type'),
     instructions : 'The sections that may be chosen for this field.\n **If selected Select All Sections, all sections are selected**.' | t('section-and-product-type'),
@@ -39,3 +49,29 @@
     id : 'excludedSections',
     name : 'excludedSections',
 }) }}
+
+<script>
+    const searchInput = document.querySelector('#types-wmd-sectionandproducttype-fields-SectionField-searchInput');
+    const checkboxes = document.querySelectorAll('.checkbox-group .checkboxfield');
+
+    searchInput.addEventListener('input', (event) => {
+        const searchText = event.target.value.toLowerCase();
+        if (searchText.length > 0) {
+            checkboxes.forEach((checkbox) => {
+                const checkboxText = checkbox.querySelector('label').textContent.toLowerCase();
+                if (checkboxText.includes(searchText)) {
+                    checkbox.style.background = 'yellow';
+                } else {
+                     checkbox.style.background = '';
+                }
+            })
+        } else {
+            checkboxes.forEach((checkbox) => {
+                const checkboxText = checkbox.querySelector('label').textContent.toLowerCase();
+                if (checkboxText.includes(searchText)) {
+                    checkbox.style.background = '';
+                }
+            })
+        }
+    });
+</script>