32 lines
3.2 KiB
JavaScript
32 lines
3.2 KiB
JavaScript
|
'use strict';
|
||
|
|
(()=>{
|
||
|
|
const $=s=>document.querySelector(s), $$=s=>[...document.querySelectorAll(s)];
|
||
|
|
const menu=$('.sf-menu-toggle');if(menu){menu.addEventListener('click',()=>{let open=menu.getAttribute('aria-expanded')!=='true';menu.setAttribute('aria-expanded',String(open));$('#sf-primary-links')?.classList.toggle('is-open',open);});}
|
||
|
|
// Filter actual static content cards, no API is needed at runtime.
|
||
|
|
$$('.sf-collection').forEach(grid=>{
|
||
|
|
const cards=$$('.sf-item',grid);
|
||
|
|
if(cards.length<2)return;
|
||
|
|
const toolbar=document.createElement('div');toolbar.className='sf-filters';
|
||
|
|
const search=document.createElement('input');search.type='search';search.placeholder='筛选当前列表';search.setAttribute('aria-label','筛选当前列表');
|
||
|
|
const status=document.createElement('span');status.setAttribute('aria-live','polite');status.style.fontSize='12px';
|
||
|
|
const brand=document.createElement('select');brand.setAttribute('aria-label','按品牌筛选');
|
||
|
|
const category=document.createElement('select');category.setAttribute('aria-label','按分类筛选');
|
||
|
|
function fill(el,field,all){el.append(new Option(all,''));const vals=[...new Set(cards.map(x=>x.dataset[field]||'').filter(Boolean))].sort();vals.forEach(v=>el.append(new Option(v,v)));if(!vals.length)el.hidden=true;}
|
||
|
|
fill(brand,'brand','全部品牌');fill(category,'category','全部分类');
|
||
|
|
toolbar.append(search,brand,category,status);grid.parentNode.insertBefore(toolbar,grid);
|
||
|
|
function apply(){let val=search.value.trim().toLocaleLowerCase();let visible=0;cards.forEach(card=>{let hit=card.textContent.toLocaleLowerCase().includes(val)&&(!brand.value||card.dataset.brand===brand.value)&&(!category.value||card.dataset.category===category.value);card.hidden=!hit;if(hit)visible++;});status.textContent=`共 ${visible} 项`;}
|
||
|
|
search.addEventListener('input',apply);brand.addEventListener('change',apply);category.addEventListener('change',apply);apply();
|
||
|
|
});
|
||
|
|
const input=$('#sf-search'),root=$('#sf-search-results'),count=$('#sf-search-count');
|
||
|
|
if(input&&root){
|
||
|
|
let data=[];const params=new URLSearchParams(location.search);input.value=params.get('q')||'';
|
||
|
|
let debounce=null;
|
||
|
|
const render=()=>{let q=input.value.trim().toLocaleLowerCase();let found=q?data.filter(d=>`${d.title} ${d.summary} ${d.brand} ${d.type}`.toLocaleLowerCase().includes(q)).slice(0,100):data.slice(0,30);
|
||
|
|
root.replaceChildren();count.textContent=`${found.length} 条结果${!q?'（显示前30条）':''}`;
|
||
|
|
found.forEach(d=>{let article=document.createElement('article'),a=document.createElement('a'),small=document.createElement('small'),p=document.createElement('p');article.className='sf-search-result';a.textContent=d.title;a.href=d.url.replace(/^\//,'');small.textContent=d.type;p.textContent=d.summary;article.append(a,small,p);root.append(article);});
|
||
|
|
};const base=document.querySelector('base')?.href||location.href;
|
||
|
|
fetch(new URL('search-index.json',base)).then(r=>{if(!r.ok)throw Error('index unavailable');return r.json();}).then(v=>{data=v;render()}).catch(()=>{count.textContent='搜索索引加载失败，请检查站点文件部署路径';});
|
||
|
|
input.addEventListener('input',()=>{clearTimeout(debounce);debounce=setTimeout(render,100)});
|
||
|
|
}
|
||
|
|
})();
|