From 0f867fd1445b917ad0dbb46701417f5c9b5b7607 Mon Sep 17 00:00:00 2001
From: MaxEtMoritz <markus@memotech.franken.de>
Date: Wed, 16 Nov 2022 17:09:59 +0100
Subject: [PATCH] search in headers

---
 dist/js/dselect.js     | 13 +++++++++++++
 dist/js/dselect.min.js | 26 +++++++++++++-------------
 source/js/dselect.js   | 14 ++++++++++++++
 3 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/dist/js/dselect.js b/dist/js/dselect.js
index 7d8b42f..f4b9ca6 100644
--- a/dist/js/dselect.js
+++ b/dist/js/dselect.js
@@ -51,6 +51,19 @@ function dselectSearch(event, input, classElement, classToggler, creatable) {
       item.classList.add("d-none");
     }
   }
+  for (const header of headers) {
+    const filterText = header.textContent;
+    if (filterText.toLowerCase().indexOf(filterValue) > -1) {
+      header.classList.remove("d-none");
+      let item = header;
+      while (item = item.nextElementSibling) {
+        if (item.classList.contains("dropdown-header")) {
+          break;
+        }
+        item.classList.remove("d-none");
+      }
+    }
+  }
   const found = Array.from(items).filter((i) => !i.classList.contains("d-none") && !i.hasAttribute("hidden"));
   if (found.length < 1) {
     noResults.classList.remove("d-none");
diff --git a/dist/js/dselect.min.js b/dist/js/dselect.min.js
index 68eb2ca..1c2c866 100644
--- a/dist/js/dselect.min.js
+++ b/dist/js/dselect.min.js
@@ -1,19 +1,19 @@
-function dselectUpdate(e,t,a){const d=e.dataset.dselectValue,o=e.closest(`.${t}`).previousElementSibling,f=o.nextElementSibling.getElementsByClassName(a)[0],i=o.nextElementSibling.querySelector("input");o.multiple?Array.from(o.options).filter(m=>m.value===d)[0].selected=!0:o.value=d,o.multiple&&f.click(),o.dispatchEvent(new Event("change")),f.focus(),i&&(i.value="")}function dselectRemoveTag(e,t,a){const d=e.parentNode.dataset.dselectValue,o=e.closest(`.${t}`).previousElementSibling,f=o.nextElementSibling.getElementsByClassName(a)[0],i=o.nextElementSibling.querySelector("input");Array.from(o.options).filter(m=>m.value===d)[0].selected=!1,o.dispatchEvent(new Event("change")),f.click(),i&&(i.value="")}function dselectSearch(e,t,a,d,o){const f=t.value.toLowerCase().trim(),i=t.nextElementSibling,m=i.querySelectorAll(".dropdown-header"),x=i.querySelectorAll(".dropdown-item"),p=i.nextElementSibling;m.forEach(c=>c.classList.add("d-none"));for(const c of x)if(c.textContent.toLowerCase().indexOf(f)>-1){c.classList.remove("d-none");let g=c;for(;g=g.previousElementSibling;)if(g.classList.contains("dropdown-header")){g.classList.remove("d-none");break}}else c.classList.add("d-none");if(Array.from(x).filter(c=>!c.classList.contains("d-none")&&!c.hasAttribute("hidden")).length<1){if(p.classList.remove("d-none"),i.classList.add("d-none"),o&&(p.innerHTML=`Press Enter to add "<strong>${t.value}</strong>"`,e.key==="Enter")){const c=t.closest(`.${a}`).previousElementSibling,h=c.nextElementSibling.getElementsByClassName(d)[0];c.insertAdjacentHTML("afterbegin",`<option value="${t.value}" selected>${t.value}</option>`),c.dispatchEvent(new Event("change")),t.value="",t.dispatchEvent(new Event("keyup")),h.click(),h.focus()}}else p.classList.add("d-none"),i.classList.remove("d-none")}function dselectClear(e,t){const a=e.closest(`.${t}`).previousElementSibling;Array.from(a.options).forEach(d=>d.selected=!1),a.dispatchEvent(new Event("change"))}function dselect(e,t={}){e.style.display="none";const a="dselect-wrapper",d="dselect-no-results",o="dselect-tag",f="dselect-tag-remove",i="dselect-placeholder",m="dselect-clear",x="dselect-clearable",p=!1,S=!1,c=!1,h="360px",g="",A=w("search")||t.search||p,k=w("creatable")||t.creatable||S,y=w("clearable")||t.clearable||c,M=e.dataset.dselectMaxHeight||t.maxHeight||h;let E=e.dataset.dselectSize||t.size||g;E=E!==""?` form-select-${E}`:"";const b=`form-select${E}`,H=A?`<input onkeydown="return event.key !== 'Enter'" onkeyup="dselectSearch(event, this, '${a}', '${b}', ${k})" type="text" class="form-control" placeholder="Search" autofocus>`:"";function w(n){const l=`data-dselect-${n}`;return e.hasAttribute(l)?e.getAttribute(l).toLowerCase()==="true":null}function B(){e.nextElementSibling&&e.nextElementSibling.classList&&e.nextElementSibling.classList.contains(a)&&e.nextElementSibling.remove()}function $(n){return n.getAttribute("value")===""}function L(n,l){if(l){const s=Array.from(n).filter(r=>r.selected&&!$(r)),v=Array.from(n).filter(r=>$(r));let u=[];if(s.length===0){const r=v.length?v[0].textContent:"&nbsp;";u.push(`<span class="${i}">${r}</span>`)}else for(const r of s)u.push(`
-            <div class="${o}" data-dselect-value="${r.value}">
-              ${r.text}
-              <svg onclick="dselectRemoveTag(this, '${a}', '${b}')" class="${f}" width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>
+function dselectUpdate(e,t,c){const u=e.dataset.dselectValue,a=e.closest(`.${t}`).previousElementSibling,f=a.nextElementSibling.getElementsByClassName(c)[0],i=a.nextElementSibling.querySelector("input");a.multiple?Array.from(a.options).filter(g=>g.value===u)[0].selected=!0:a.value=u,a.multiple&&f.click(),a.dispatchEvent(new Event("change")),f.focus(),i&&(i.value="")}function dselectRemoveTag(e,t,c){const u=e.parentNode.dataset.dselectValue,a=e.closest(`.${t}`).previousElementSibling,f=a.nextElementSibling.getElementsByClassName(c)[0],i=a.nextElementSibling.querySelector("input");Array.from(a.options).filter(g=>g.value===u)[0].selected=!1,a.dispatchEvent(new Event("change")),f.click(),i&&(i.value="")}function dselectSearch(e,t,c,u,a){const f=t.value.toLowerCase().trim(),i=t.nextElementSibling,g=i.querySelectorAll(".dropdown-header"),$=i.querySelectorAll(".dropdown-item"),p=i.nextElementSibling;g.forEach(s=>s.classList.add("d-none"));for(const s of $)if(s.textContent.toLowerCase().indexOf(f)>-1){s.classList.remove("d-none");let r=s;for(;r=r.previousElementSibling;)if(r.classList.contains("dropdown-header")){r.classList.remove("d-none");break}}else s.classList.add("d-none");for(const s of g)if(s.textContent.toLowerCase().indexOf(f)>-1){s.classList.remove("d-none");let r=s;for(;(r=r.nextElementSibling)&&!r.classList.contains("dropdown-header");)r.classList.remove("d-none")}if(Array.from($).filter(s=>!s.classList.contains("d-none")&&!s.hasAttribute("hidden")).length<1){if(p.classList.remove("d-none"),i.classList.add("d-none"),a&&(p.innerHTML=`Press Enter to add "<strong>${t.value}</strong>"`,e.key==="Enter")){const s=t.closest(`.${c}`).previousElementSibling,v=s.nextElementSibling.getElementsByClassName(u)[0];s.insertAdjacentHTML("afterbegin",`<option value="${t.value}" selected>${t.value}</option>`),s.dispatchEvent(new Event("change")),t.value="",t.dispatchEvent(new Event("keyup")),v.click(),v.focus()}}else p.classList.add("d-none"),i.classList.remove("d-none")}function dselectClear(e,t){const c=e.closest(`.${t}`).previousElementSibling;Array.from(c.options).forEach(u=>u.selected=!1),c.dispatchEvent(new Event("change"))}function dselect(e,t={}){e.style.display="none";const c="dselect-wrapper",u="dselect-no-results",a="dselect-tag",f="dselect-tag-remove",i="dselect-placeholder",g="dselect-clear",$="dselect-clearable",p=!1,S=!1,s=!1,v="360px",r="",A=w("search")||t.search||p,k=w("creatable")||t.creatable||S,L=w("clearable")||t.clearable||s,M=e.dataset.dselectMaxHeight||t.maxHeight||v;let E=e.dataset.dselectSize||t.size||r;E=E!==""?` form-select-${E}`:"";const b=`form-select${E}`,H=A?`<input onkeydown="return event.key !== 'Enter'" onkeyup="dselectSearch(event, this, '${c}', '${b}', ${k})" type="text" class="form-control" placeholder="Search" autofocus>`:"";function w(l){const o=`data-dselect-${l}`;return e.hasAttribute(o)?e.getAttribute(o).toLowerCase()==="true":null}function B(){e.nextElementSibling&&e.nextElementSibling.classList&&e.nextElementSibling.classList.contains(c)&&e.nextElementSibling.remove()}function x(l){return l.getAttribute("value")===""}function y(l,o){if(o){const n=Array.from(l).filter(d=>d.selected&&!x(d)),h=Array.from(l).filter(d=>x(d));let m=[];if(n.length===0){const d=h.length?h[0].textContent:"&nbsp;";m.push(`<span class="${i}">${d}</span>`)}else for(const d of n)m.push(`
+            <div class="${a}" data-dselect-value="${d.value}">
+              ${d.text}
+              <svg onclick="dselectRemoveTag(this, '${c}', '${b}')" class="${f}" width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>
             </div>
-          `);return u.join("")}else{const s=n[n.selectedIndex];return $(s)?`<span class="${i}">${s.innerHTML}</span>`:s.innerHTML}}function C(n){const l=n[n.selectedIndex];return $(l)?"":l.textContent}function T(n){let l=[];for(const s of n)if(s.tagName==="OPTGROUP")l.push(`<h6 class="dropdown-header">${s.getAttribute("label")}</h6>`);else{const v=$(s)?" hidden":"",u=s.selected?" active":"",r=e.multiple&&s.selected?" disabled":"",O=s.value,q=s.textContent;l.push(`<button${v} class="dropdown-item${u}" data-dselect-value="${O}" type="button" onclick="dselectUpdate(this, '${a}', '${b}')"${r}>${q}</button>`)}return l=l.join(""),l}function z(){const n=e.multiple?' data-bs-auto-close="outside"':"",l=Array.from(e.classList).filter(u=>u!=="form-select"&&u!=="form-select-sm"&&u!=="form-select-lg").join(" "),s=y&&!e.multiple?`
-    <button type="button" class="btn ${m}" title="Clear selection" onclick="dselectClear(this, '${a}')">
+          `);return m.join("")}else{const n=l[l.selectedIndex];return x(n)?`<span class="${i}">${n.innerHTML}</span>`:n.innerHTML}}function C(l){const o=l[l.selectedIndex];return x(o)?"":o.textContent}function T(l){let o=[];for(const n of l)if(n.tagName==="OPTGROUP")o.push(`<h6 class="dropdown-header">${n.getAttribute("label")}</h6>`);else{const h=x(n)?" hidden":"",m=n.selected?" active":"",d=e.multiple&&n.selected?" disabled":"",N=n.value,q=n.textContent;o.push(`<button${h} class="dropdown-item${m}" data-dselect-value="${N}" type="button" onclick="dselectUpdate(this, '${c}', '${b}')"${d}>${q}</button>`)}return o=o.join(""),o}function O(){const l=e.multiple?' data-bs-auto-close="outside"':"",o=Array.from(e.classList).filter(m=>m!=="form-select"&&m!=="form-select-sm"&&m!=="form-select-lg").join(" "),n=L&&!e.multiple?`
+    <button type="button" class="btn ${g}" title="Clear selection" onclick="dselectClear(this, '${c}')">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none">
         <path d="M13 1L0.999999 13" stroke-width="2" stroke="currentColor"></path>
         <path d="M1 1L13 13" stroke-width="2" stroke="currentColor"></path>
       </svg>
     </button>
-    `:"",v=`
-    <div class="dropdown ${a} ${l}">
-      <button class="${b} ${!e.multiple&&y?x:""}" data-dselect-text="${!e.multiple&&C(e.options)}" type="button" data-bs-toggle="dropdown" aria-expanded="false"${n}>
-        ${L(e.options,e.multiple)}
+    `:"",h=`
+    <div class="dropdown ${c} ${o}">
+      <button class="${b} ${!e.multiple&&L?$:""}" data-dselect-text="${!e.multiple&&C(e.options)}" type="button" data-bs-toggle="dropdown" aria-expanded="false"${l}>
+        ${y(e.options,e.multiple)}
       </button>
       <div class="dropdown-menu">
         <div class="d-flex flex-column">
@@ -21,9 +21,9 @@ function dselectUpdate(e,t,a){const d=e.dataset.dselectValue,o=e.closest(`.${t}`
           <div class="dselect-items" style="max-height:${M};overflow:auto">
             ${T(e.querySelectorAll("*"))}
           </div>
-          <div class="${d} d-none">No results found</div>
+          <div class="${u} d-none">No results found</div>
         </div>
       </div>
-      ${s}
+      ${n}
     </div>
-    `;B(),e.insertAdjacentHTML("afterend",v)}z();function N(){const n=e.nextElementSibling,l=n.getElementsByClassName(b)[0],s=n.getElementsByClassName("dselect-items")[0];l.innerHTML=L(e.options,e.multiple),s.innerHTML=T(e.querySelectorAll("*")),e.multiple||(l.dataset.dselectText=C(e.options))}e.addEventListener("change",N)}
+    `;B(),e.insertAdjacentHTML("afterend",h)}O();function z(){const l=e.nextElementSibling,o=l.getElementsByClassName(b)[0],n=l.getElementsByClassName("dselect-items")[0];o.innerHTML=y(e.options,e.multiple),n.innerHTML=T(e.querySelectorAll("*")),e.multiple||(o.dataset.dselectText=C(e.options))}e.addEventListener("change",z)}
diff --git a/source/js/dselect.js b/source/js/dselect.js
index 8b67424..1b0d206 100644
--- a/source/js/dselect.js
+++ b/source/js/dselect.js
@@ -54,6 +54,20 @@ function dselectSearch(event, input, classElement, classToggler, creatable) {
       item.classList.add('d-none')
     }
   }
+  for (const header of headers) {
+    const filterText = header.textContent
+
+    if (filterText.toLowerCase().indexOf(filterValue) > -1) {
+      header.classList.remove("d-none")
+      let item = header
+      while (item = item.nextElementSibling) {
+        if (item.classList.contains("dropdown-header")) {
+          break
+        }
+        item.classList.remove("d-none")
+      }
+    }
+  }
   const found = Array.from(items).filter(i => !i.classList.contains('d-none') && !i.hasAttribute('hidden'))
   if (found.length < 1) {
     noResults.classList.remove('d-none')