feat: allow filtering taxonomies with search box

Closes #264
hugomods · Oct 25, 2024 · 91b0dd0 · 91b0dd0
1 parent d2edd1e
commit 91b0dd0
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 17 deletions.
diff --git a/assets/search/js/dropdown.ts b/assets/search/js/dropdown.ts
@@ -18,7 +18,30 @@
         show(dropdown)
     }
 
+    const filtering = {}
+
     document.addEventListener('DOMContentLoaded', () => {
+        document.addEventListener('keyup', (e: Event) => {
+            const input = e.target as HTMLInputElement
+            if (!input.classList.contains('search-dropdown-input')) {
+                return
+            }
+
+            const value = input.value.toLowerCase().trim()
+            const dropdown = input.closest('.search-dropdown')
+            const items = Array.from(dropdown?.querySelectorAll<HTMLElement>('.search-dropdown-item') ?? [])
+            for (const item of items) {
+                if (value === '' || item.textContent?.toLowerCase().indexOf(value) !== -1) {
+                    item.classList.remove('hide')
+                    continue
+                }
+
+                if (!item.classList.contains('active')) {
+                    item.classList.add('hide')
+                }
+            }
+        })
+
         document.addEventListener('click', (e: Event) => {
             const toggleEl = e.target.closest('.search-dropdown-toggle')
             if (toggleEl) {
@@ -28,6 +51,12 @@
                 return
             }
 
+            const input = e.target.closest('.search-dropdown-input')
+            if (input) {
+                // do not hide dropdown body when focus on input.
+                return
+            }
+
             const item = e.target.closest('.search-dropdown-item')
             if (item) {
                 const dropdown = item.closest('.search-dropdown')

diff --git a/assets/search/js/form.ts b/assets/search/js/form.ts
@@ -76,7 +76,9 @@ export default class Form {
     ${params.icons['lang']}
     <span class="search-dropdown-label">${label}</span>
   </button>
-  <ul class="search-dropdown-menu">${options}</ul>
+  <div class="search-dropdown-body">
+    <ul class="search-dropdown-menu">${options}</ul>
+  </div>
 </div>`
     }
 
@@ -91,11 +93,13 @@ export default class Form {
   <button class="search-dropdown-toggle" type="button" aria-expanded="false" title="Sorting">
     ${params.icons['sort']} <span class="search-dropdown-label">${defaultSort}</span>
   </button>
-  <ul class="search-dropdown-menu">
-    <li class="search-dropdown-item active" data-value="">${defaultSort}</li>
-    <li class="search-dropdown-item" data-value="date_asc">${translate('sort_by_date_asc')}</li>
-    <li class="search-dropdown-item" data-value="date_desc">${translate('sort_by_date_desc')}</li>
-  </ul>
+  <div class="search-dropdown-body">
+    <ul class="search-dropdown-menu">
+        <li class="search-dropdown-item active" data-value="">${defaultSort}</li>
+        <li class="search-dropdown-item" data-value="date_asc">${translate('sort_by_date_asc')}</li>
+        <li class="search-dropdown-item" data-value="date_desc">${translate('sort_by_date_desc')}</li>
+    </ul>
+  </div>
 </div>`
     }
 
@@ -114,7 +118,9 @@ export default class Form {
         <button class="search-dropdown-toggle" type="button" aria-expanded="false" title="${label}">
           ${params.icons['year']} <span class="search-dropdown-label">${label}</span>
         </button>
-        <ul class="search-dropdown-menu">${items}</ul>
+        <div class="search-dropdown-body">
+          <ul class="search-dropdown-menu">${items}</ul>
+        </div>
       </div>`
     }
 
@@ -137,7 +143,10 @@ export default class Form {
         <button class="search-dropdown-toggle" type="button" aria-expanded="false" title="${label}">
           ${params.icons['taxonomies']} <span class="search-dropdown-label">${label}</span>
         </button>
-        <ul class="search-dropdown-menu">${v}</ul>
+        <div class="search-dropdown-body">
+            <input class="search-dropdown-input">
+            <ul class="search-dropdown-menu">${v}</ul>
+        </div>
       </div>`
     }
 

diff --git a/assets/search/scss/_dropdown.scss b/assets/search/scss/_dropdown.scss
@@ -16,24 +16,40 @@
     }
 }
 
-.search-dropdown-menu {
+.search-dropdown-body {
     display: none;
-    left: 0;
-    list-style: none;
     position: absolute;
-    background-color: var(--search-bg);
+    left: 0;
+    margin: 1.5rem 0 0;
     min-width: 160px;
+    max-height: 50vh;
+    overflow: hidden auto;
+    background-color: var(--search-bg);
     border: 1px solid var(--search-border-color);
     border-radius: 0.25rem;
-    margin: 1.5rem 0 0;
-    max-height: 30vh;
-    overflow: hidden auto;
-    padding: 0.5rem 0 0.15rem;
     z-index: 1;
+    scrollbar-width: thin;
+}
+
+.search-dropdown-input {
+    position: sticky;
+    top: 0;
+    outline: none;
+    border: none;
+    border-bottom: 2px solid var(--search-border-color);
+    padding: .25rem .5rem;
+    margin-bottom: .25rem;
+}
+
+.search-dropdown-menu {
+    list-style: none;
+    padding-left: 0;
+    margin-bottom: 0;
 }
 
 .search-dropdown-item {
     color: var(--search-color);
+    margin: .25rem 0;
     padding: 0.25rem 0.5rem;
     white-space: nowrap;
 
@@ -42,6 +58,10 @@
         background: var(--search-primary);
         color: white;
     }
+
+    &.hide {
+        display: none;
+    }
 }
 
 .search-dropdown {
@@ -51,7 +71,7 @@
     position: relative;
 
     &.show {
-        .search-dropdown-menu {
+        .search-dropdown-body {
             display: block;
         }
     }