اسکریپت فیلتر و جستجوی هوشمند با جستجوی بلادرنگ (سورس کد JS خالص)

<div class="finder">
  <input type="search" id="q" placeholder="جستجو…" aria-label="جستجو">
  <select id="cat" aria-label="دسته‌بندی">
    <option value="">همهٔ دسته‌ها</option>
    <option>کفش</option><option>کیف</option><option>ساعت</option>
  </select>
  <input type="range" id="max" min="100" max="3000" step="100" value="3000">
  <select id="sort">
    <option value="new">جدیدترین</option>
    <option value="low">ارزان‌ترین</option>
    <option value="high">گران‌ترین</option>
  </select>
  <p id="count" aria-live="polite"></p>
  <div id="results"></div>
</div>

const products = [
  { title: 'کفش ورزشی رانینگ', cat: 'کفش', price: 1850, date: 9 },
  { title: 'کیف دوشی چرم',     cat: 'کیف', price: 1500, date: 8 },
  { title: 'ساعت مچی کلاسیک',  cat: 'ساعت', price: 2900, date: 6 },
  // ...
];

const state = { q: '', cat: '', max: 3000, sort: 'new' };

// یکسان‌سازی متن فارسی: ی و ک عربی، نیم‌فاصله و فاصله‌های اضافه
const normalize = (s) => s
  .replace(/ي/g, 'ی').replace(/ك/g, 'ک')
  .replace(/\u200c/g, ' ').replace(/\s+/g, ' ')
  .trim().toLowerCase();

function applyFilters() {
  const q = normalize(state.q);
  const list = products
    .filter(p => !q || normalize(p.title).includes(q))
    .filter(p => !state.cat || p.cat === state.cat)
    .filter(p => p.price <= state.max)
    .sort((a, b) =>
      state.sort === 'low'  ? a.price - b.price :
      state.sort === 'high' ? b.price - a.price :
                              b.date - a.date);
  render(list);
}

const results = document.getElementById('results');
const count = document.getElementById('count');

function render(list) {
  results.replaceChildren(...list.map(p => {
    const card = document.createElement('div');
    card.className = 'card';
    card.innerHTML = '<b></b><small></small><span></span>';
    card.querySelector('b').textContent = p.title;
    card.querySelector('small').textContent = p.cat;
    card.querySelector('span').textContent = p.price.toLocaleString('fa-IR') + ' هزار تومان';
    return card;
  }));
  count.textContent = list.length
    ? `${list.length.toLocaleString('fa-IR')} نتیجه`
    : 'نتیجه‌ای پیدا نشد؛ فیلترها را کمتر کنید.';
}

function debounce(fn, ms = 200) {
  let t;
  return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };
}

const $ = (id) => document.getElementById(id);

$('q').addEventListener('input', debounce((e) => {
  state.q = e.target.value; applyFilters(); syncURL();
}));
$('cat').addEventListener('change',  (e) => { state.cat  = e.target.value;  applyFilters(); syncURL(); });
$('max').addEventListener('input',   (e) => { state.max  = +e.target.value; applyFilters(); syncURL(); });
$('sort').addEventListener('change', (e) => { state.sort = e.target.value;  applyFilters(); syncURL(); });

applyFilters();

function syncURL() {
  const p = new URLSearchParams();
  if (state.q)    p.set('q', state.q);
  if (state.cat)  p.set('cat', state.cat);
  if (state.max < 3000) p.set('max', state.max);
  if (state.sort !== 'new') p.set('sort', state.sort);
  history.replaceState(null, '', p.toString() ? '?' + p : location.pathname);
}

// هنگام بارگذاری صفحه
const init = new URLSearchParams(location.search);
state.q    = init.get('q')    || '';
state.cat  = init.get('cat')  || '';
state.max  = +(init.get('max') || 3000);
state.sort = init.get('sort') || 'new';