Configure the Grid search through data- attributes

static/scripts/grid/filter.js

@@ -9,6 +9,19 @@ class BrickGridFilter {
 
         // Search setup
         if (this.html_search) {
+            // Exact attributes
+            if (this.html_search.dataset.searchExact) {
+                this.search_exact = new Set(this.html_search.dataset.searchExact.split(",").map(el => el.trim()));
+            } else {
+                this.search_exact = new Set();
+            }
+
+            // List attributes
+            this.search_list = [];
+            if (this.html_search.dataset.searchList) {
+                this.search_list = this.html_search.dataset.searchList.split(",").map(el => el.trim());
+            }
+
             this.html_search.addEventListener("keyup", ((gridfilter) => () => {
                 gridfilter.filter();
             })(this));
@@ -88,10 +101,24 @@ class BrickGridFilter {
 
             // Check all searchable fields for a match
             if (options.search) {
-                for (let attribute of ["data-name", "data-number", "data-parts", "data-theme", "data-year"]) {
+                // Browse the whole dataset
-                    if (current.getAttribute(attribute).includes(options.search)) {
+                for (const set in current.dataset) {
-                        current.parentElement.classList.remove("d-none");
+                    // Exact attribute
-                        return;
+                    if (this.search_exact.has(set)) {
+                        if (current.dataset[set].includes(options.search)) {
+                            current.parentElement.classList.remove("d-none");
+                            return;
+                        }
+                    } else {
+                        // List search
+                        for (const list of this.search_list) {
+                            if (set.startsWith(this.search_list)) {
+                                if (current.dataset[set].includes(options.search)) {
+                                    current.parentElement.classList.remove("d-none");
+                                    return;
+                                }
+                            }
+                        }
                     }
                 }
 

templates/sets.html

@@ -10,7 +10,7 @@
       <label class="visually-hidden" for="grid-search">Search</label>
       <div class="input-group">
         <span class="input-group-text"><i class="ri-search-line"></i><span class="ms-1 d-none d-xl-inline"> Search</span></span>
-        <input id="grid-search" class="form-control form-control-sm" type="text" placeholder="Set name, set number, set theme or number of parts..." value="">
+        <input id="grid-search" data-search-exact="name,number,parts,theme,year" class="form-control form-control-sm" type="text" placeholder="Set name, set number, set theme or number of parts..." value="">
       </div>
     </div>
     <div class="col-12">