검색 기능 예제

// 필터 상태 저장 const filterCriteria = { category: 'all', price: 'all', searchText: '' }; // 필터를 설정하고 항목을 필터링하는 함수 function setFilter(type, value) { filterCriteria[type] = value; filterItems(); } // 필터 조건에 따라 항목을 표시하거나 숨기는 함수 function filterItems() { const items = document.querySelectorAll('.item'); // 검색어를 가져옴 const searchInput = document.getElementById('searchInput'); filterCriteria.searchText = searchInput.value.toLowerCase(); items.forEach(item => { // 카테고리 및 가격 필터 조건 const matchCategory = filterCriteria.category === 'all' || item.classList.contains(filterCriteria.category); const matchPrice = filterCriteria.price === 'all' || item.classList.contains(filterCriteria.price); // 검색어 필터 조건 (텍스트 포함 여부 확인) const matchSearch = item.textContent.toLowerCase().includes(filterCriteria.searchText); // 세 조건을 모두 만족하면 항목을 표시 if (matchCategory && matchPrice && matchSearch) { item.classList.add('show'); } else { item.classList.remove('show'); } }); } 검색 기능 예제

사과

바나나

체리

오렌지

포도

파인애플

복숭아

이중필터 (1)