https://churchschickenmenu.com/js/menu-search.js

1/* ==========================================================================
2   Church's Chicken Menu — Instant Live Search & Filter Logic
3   ========================================================================== */
4
5document.addEventListener('DOMContentLoaded', () => {
6  const searchInput = document.getElementById('menuSearchInput');
7  const filterTabs = document.querySelectorAll('.tab-btn');
8  const menuCards = document.querySelectorAll('.menu-card');
9  const tableRows = document.querySelectorAll('.price-table tbody tr');
10  const noResultsMsg = document.getElementById('noResultsMsg');
11
12  let currentCategory = 'all';
13  let searchQuery = '';
14
15  function filterMenu() {
16    let visibleCount = 0;
17    let visibleTableRows = 0;
18
19    // Filter Menu Cards
20    menuCards.forEach(card => {
21      const cardCategory = card.getAttribute('data-category');
22      const cardTitle = card.querySelector('.card-title')?.textContent.toLowerCase() || '';
23      const cardDesc = card.querySelector('.card-desc')?.textContent.toLowerCase() || '';
24      
25      const matchesCategory = currentCategory === 'all' || cardCategory === currentCategory;
26      const matchesSearch = searchQuery === '' || cardTitle.includes(searchQuery) || cardDesc.includes(searchQuery);
27
28      if (matchesCategory && matchesSearch) {
29        card.style.display = 'flex';
30        visibleCount++;
31      } else {
32        card.style.display = 'none';
33      }
34    });
35
36    // Filter Price Table Rows
37    tableRows.forEach(row => {
38      const rowCategory = row.getAttribute('data-category');
39      const itemName = row.querySelector('.item-name')?.textContent.toLowerCase() || '';
40      const itemDesc = row.querySelector('.item-desc')?.textContent.toLowerCase() || '';
41
42      const matchesCategory = currentCategory === 'all' || rowCategory === currentCategory;
43      const matchesSearch = searchQuery === '' || itemName.includes(searchQuery) || itemDesc.includes(searchQuery);
44
45      if (matchesCategory && matchesSearch) {
46        row.style.display = 'table-row';
47        visibleTableRows++;
48      } else {
49        row.style.display = 'none';
50      }
51    });
52
53    // Show/Hide No Results Message
54    if (noResultsMsg) {
55      noResultsMsg.style.display = (visibleCount + visibleTableRows) === 0 ? 'block' : 'none';
56    }
57  }
58
59  // Category Tab Click Handler
60  filterTabs.forEach(tab => {
61    tab.addEventListener('click', () => {
62      filterTabs.forEach(t => t.classList.remove('active'));
63      tab.classList.add('active');
64      
65      currentCategory = tab.getAttribute('data-category');
66      filterMenu();
67    });
68  });
69
70  // Search Input Handler (Debounced)
71  if (searchInput) {
72    let timeout = null;
73    searchInput.addEventListener('input', (e) => {
74      clearTimeout(timeout);
75      timeout = setTimeout(() => {
76        searchQuery = e.target.value.toLowerCase().trim();
77        filterMenu();
78      }, 150);
79    });
80  }
81});