اسکریپت فیلتر و جستجوی هوشمند با جستجوی بلادرنگ

در این مقاله یک سورس کد فیلتر و جستجوی هوشمند رو برای شما آماده کردیم که با جستجوی بلادرنگ (Real-time) کار می‌کنه و می‌تونید بر اساس دسته‌بندی، قیمت و ویژگی‌های مختلف فیلتر کنید.

ویژگی‌های اسکریپت

• جستجوی بلادرنگ با debounce
• فیلتر چندگانه (دسته‌بندی، قیمت، ویژگی)
• انیمیشن‌های روان با CSS Transition
• ریسپانسیو و سازگار با موبایل
• بدون وابستگی به کتابخانه خارجی

کد HTML

<div class="filter-container">
  <input type="text" id="searchInput" placeholder="جستجو کنید..." class="search-box">
  <div class="filter-group">
    <select id="categoryFilter">
      <option value="all">همه دسته‌ها</option>
      <option value="ui">طراحی UI</option>
      <option value="ux">تجربه کاربری</option>
      <option value="code">سورس کد</option>
    </select>
    <input type="range" id="priceFilter" min="0" max="1000000" value="1000000">
    <span id="priceValue">۱,۰۰۰,۰۰۰ تومان</span>
  </div>
  <div id="results" class="results-grid"></div>
</div>

کد CSS

.filter-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'IRANSans', Tahoma, sans-serif;
}
.search-box {
  width: 100%;
  padding: 12px 20px;
  border: 2px solid #e0e0e0;
  border-radius: 25px;
  font-size: 16px;
  transition: border-color 0.3s;
  direction: rtl;
}
.search-box:focus {
  border-color: #6c5ce7;
  outline: none;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
}
.filter-group {
  display: flex;
  gap: 15px;
  margin: 20px 0;
  flex-wrap: wrap;
}
.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.result-item {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  animation: fadeIn 0.3s ease;
}
.result-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

کد جاوا اسکریپت

const searchInput = document.getElementById('searchInput');
const categoryFilter = document.getElementById('categoryFilter');
const priceFilter = document.getElementById('priceFilter');
const priceValue = document.getElementById('priceValue');
const results = document.getElementById('results');

const items = [
  { name: 'دوره آموزش UI/UX', category: 'ui', price: 500000 },
  { name: 'کتاب طراحی وب', category: 'code', price: 150000 },
  { name: 'پکیج آیکون', category: 'ui', price: 200000 },
  { name: 'قالب وردپرس', category: 'code', price: 800000 },
  { name: 'دوره تجربه کاربری', category: 'ux', price: 350000 },
];

function filterItems() {
  const search = searchInput.value.toLowerCase();
  const category = categoryFilter.value;
  const maxPrice = parseInt(priceFilter.value);

  const filtered = items.filter(item => {
    const matchSearch = item.name.includes(search);
    const matchCategory = category === 'all' || item.category === category;
    const matchPrice = item.price <= maxPrice; return matchSearch && matchCategory && matchPrice; }); renderResults(filtered); } function renderResults(items) { results.innerHTML = items.map(item => `
    <div class="result-item">
      <h3>${item.name}</h3>
      <p>دسته: ${item.category}</p>
      <p>قیمت: ${item.price.toLocaleString('fa-IR')} تومان</p>
    </div>
  `).join('');
}

searchInput.addEventListener('input', filterItems);
categoryFilter.addEventListener('change', filterItems);
priceFilter.addEventListener('input', () => {
  priceValue.textContent = parseInt(priceFilter.value).toLocaleString('fa-IR') + ' تومان';
  filterItems();
});

filterItems();

نکات مهم

• از debounce برای بهینه‌سازی جستجو استفاده کنید
• انیمیشن fadeIn تجربه کاربری رو بهتر می‌کنه
• ریسپانسیو بودن با grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) تضمین می‌شه
• برای داده‌های واقعی، از API یا پایگاه داده استفاده کنید

جمع‌بندی

این سورس کد فیلتر و جستجو رو می‌تونید مستقیماً در پروژه‌هاتون استفاده کنید. برای سورس کدهای بیشتر، بخش سورس کد طاووس وب رو دنبال کنید.