网页js实现筛选

使用原生JavaScript实现筛选功能

通过监听输入框事件或按钮点击触发筛选逻辑。以下示例基于数组数据筛选：

// 假设有以下数据
const items = [
  { id: 1, name: 'Apple', category: 'fruit' },
  { id: 2, name: 'Carrot', category: 'vegetable' },
  { id: 3, name: 'Banana', category: 'fruit' }
];

// 获取DOM元素
const searchInput = document.getElementById('search-input');
const filterButton = document.getElementById('filter-btn');
const resultsContainer = document.getElementById('results');

// 实现筛选函数
function filterItems() {
  const searchTerm = searchInput.value.toLowerCase();
  const filtered = items.filter(item => 
    item.name.toLowerCase().includes(searchTerm) || 
    item.category.toLowerCase().includes(searchTerm)
  );

  renderResults(filtered);
}

// 渲染结果函数
function renderResults(filteredItems) {
  resultsContainer.innerHTML = filteredItems.map(item => 
    `<div class="item">
      <h3>${item.name}</h3>
      <p>${item.category}</p>
    </div>`
  ).join('');
}

// 添加事件监听
searchInput.addEventListener('input', filterItems);
filterButton.addEventListener('click', filterItems);

// 初始渲染
renderResults(items);

使用事件委托优化性能

对于动态生成的列表项，使用事件委托处理筛选：

document.addEventListener('DOMContentLoaded', () => {
  const container = document.querySelector('.item-container');

  container.addEventListener('input', (e) => {
    if (e.target.matches('.filter-control')) {
      const filterValue = e.target.value.toLowerCase();
      const items = container.querySelectorAll('.item');

      items.forEach(item => {
        const text = item.textContent.toLowerCase();
        item.style.display = text.includes(filterValue) ? '' : 'none';
      });
    }
  });
});

多条件复合筛选

实现多个筛选条件的组合查询：

function advancedFilter() {
  const nameFilter = document.getElementById('name-filter').value;
  const categoryFilter = document.getElementById('category-filter').value;
  const minId = document.getElementById('min-id').value;

  const filtered = items.filter(item => {
    return (!nameFilter || item.name.includes(nameFilter)) &&
           (!categoryFilter || item.category === categoryFilter) &&
           (!minId || item.id >= parseInt(minId));
  });

  renderResults(filtered);
}

使用URL参数保持筛选状态

将筛选条件保存在URL中以便页面刷新后保持状态：

// 读取URL参数
const params = new URLSearchParams(window.location.search);
if (params.has('filter')) {
  searchInput.value = params.get('filter');
  filterItems();
}

// 更新URL参数
function updateURL() {
  const params = new URLSearchParams();
  params.set('filter', searchInput.value);
  window.history.replaceState({}, '', `${location.pathname}?${params}`);
}

searchInput.addEventListener('input', () => {
  filterItems();
  updateURL();
});

性能优化建议

对于大数据量场景考虑以下优化方案：

// 使用防抖减少频繁触发
let debounceTimer;
searchInput.addEventListener('input', () => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(filterItems, 300);
});

// 使用Web Worker处理复杂计算
if (window.Worker) {
  const filterWorker = new Worker('filter-worker.js');
  filterWorker.onmessage = function(e) {
    renderResults(e.data);
  };

  function useWorkerFilter() {
    filterWorker.postMessage({
      items: largeDataSet,
      filter: searchInput.value
    });
  }
}

可视化筛选组件实现

创建带交互效果的筛选UI组件：

class FilterComponent {
  constructor(selector, data) {
    this.container = document.querySelector(selector);
    this.data = data;
    this.filters = {};
    this.init();
  }

  init() {
    this.renderFilterControls();
    this.renderResults(this.data);
  }

  renderFilterControls() {
    // 生成基于数据特征的筛选控件
    const categories = [...new Set(this.data.map(d => d.category))];
    const filterHTML = categories.map(cat => `
      <label>
        <input type="checkbox" value="${cat}" checked> 
        ${cat}
      </label>
    `).join('');

    this.container.innerHTML = `
      <div class="filters">${filterHTML}</div>
      <div class="results-container"></div>
    `;

    this.container.querySelectorAll('input').forEach(input => {
      input.addEventListener('change', () => this.applyFilters());
    });
  }

  applyFilters() {
    const activeFilters = Array.from(
      this.container.querySelectorAll('input:checked')
    ).map(input => input.value);

    this.filters.categories = activeFilters;
    this.updateResults();
  }

  updateResults() {
    const filtered = this.data.filter(item => 
      this.filters.categories.includes(item.category)
    );
    this.renderResults(filtered);
  }

  renderResults(items) {
    const resultsContainer = this.container.querySelector('.results-container');
    resultsContainer.innerHTML = items.map(item => `
      <div class="item">${item.name}</div>
    `).join('');
  }
}

// 使用示例
new FilterComponent('#app', items);