Add Pattern type-ahead filter covering ALL 4718 patterns (datalist, not the 300-cap facet list); E2E-verified filter/clear, 0 console errors

8328fe2207a0204fab6a9b4aacd864800c93ccc7 · 2026-07-02 08:28:40 -0700 · Steve

Files touched

M public/index.html

Diff

commit 8328fe2207a0204fab6a9b4aacd864800c93ccc7
Author: Steve <steve@designerwallcoverings.com>
Date:   Thu Jul 2 08:28:40 2026 -0700

    Add Pattern type-ahead filter covering ALL 4718 patterns (datalist, not the 300-cap facet list); E2E-verified filter/clear, 0 console errors
---
 public/index.html | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index af49c83..82b5b7f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -98,6 +98,9 @@ input[type=range]{accent-color:var(--acc)}
     <select id="book"><option value="">All books</option></select></div>
   <div class="ctl"><label class="muted">Color</label>
     <select id="color"><option value="">All colors</option></select></div>
+  <div class="ctl"><label class="muted">Pattern</label>
+    <input type="text" id="pattern" list="patternlist" placeholder="all patterns…" title="type-ahead over every pattern in the catalog">
+    <datalist id="patternlist"></datalist></div>
   <div class="ctl"><input type="text" id="q" placeholder="search pattern / sku / color…"></div>
   <div class="ctl"><label class="muted">Sort</label>
     <select id="sort">
@@ -168,9 +171,11 @@ function copyTxt(btn){
 }
 window.copyTxt=copyTxt;
 function applyFilters(){
-  const bk=$('#book').value, cl=$('#color').value, q=$('#q').value.trim().toLowerCase();
+  const bk=$('#book').value, cl=$('#color').value, q=$('#q').value.trim().toLowerCase(),
+        pat=$('#pattern').value.trim().toLowerCase();
   VIEW=ALL.filter(p=>
     (!bk||p.book===bk)&&(!cl||p.color_bucket===cl)&&
+    (!pat||String(p.series||p.display_name||'').toLowerCase().includes(pat))&&
     (!q||[p.display_name,p.series,p.sku,p.dw_sku,p.color,p.book].some(v=>v&&String(v).toLowerCase().includes(q))));
   const s=$('#sort').value, cmp={
     newest:null,
@@ -201,6 +206,9 @@ function fillSelects(){
   clSel.innerHTML='<option value="">All colors</option>'+Object.entries(colors).sort((a,b)=>b[1]-a[1]).map(([c,n])=>`<option value="${esc(c)}">${esc(c)} (${n.toLocaleString()})</option>`).join('');
   bkSel.value=keepB; clSel.value=keepC;
   window.__colors=colors;
+  // Pattern type-ahead over EVERY distinct pattern (not the 300-cap facet list)
+  const series=[...new Set(ALL.map(p=>p.series).filter(Boolean))].sort((a,b)=>String(a).localeCompare(String(b),undefined,{numeric:true}));
+  $('#patternlist').innerHTML=series.map(s=>`<option value="${esc(s)}">`).join('');
 }
 // facet strip — clickable book + color-dot chips, new.dw health-strip style
 function renderFacetStrip(){
@@ -219,6 +227,7 @@ $('#book').onchange=applyFilters;
 $('#color').onchange=applyFilters;
 $('#sort').onchange=()=>{localStorage.setItem('astek.sort',$('#sort').value);applyFilters();};
 let t; $('#q').oninput=()=>{clearTimeout(t);t=setTimeout(applyFilters,300);};
+let tp; $('#pattern').oninput=()=>{clearTimeout(tp);tp=setTimeout(applyFilters,300);};
 $('#density').oninput=()=>{document.documentElement.style.setProperty('--cols',$('#density').value);localStorage.setItem('astek.density',$('#density').value);};
 $('#more').onclick=renderMore;
 function applyView(){const list=localStorage.getItem('astek.view')==='list';grid.classList.toggle('list',list);$('#view').textContent=list?'▦ Grid view':'▤ List view';}

← 72830d0 Restyle landing to new.designerwallcoverings.com catalog UI · back to Astek Landing · Fix Safari no-items bug: resolve API fetches via location.or f845679 →