https://cavitecity.gov.ph/templates/shaper_helixultimate/js/brgy_off.js

1document.addEventListener('DOMContentLoaded', function() {
2    const searchInput = document.getElementById('searchInput');
3    const zoneDropdown = document.getElementById('zoneDropdown');
4    const tableRows = document.querySelectorAll('.resultTable tbody tr:not(:first-child)');
5
6    // Set the default value of the dropdown to "All"
7    zoneDropdown.value = "All";
8
9    // Call the filterRows function to filter the rows based on the default settings
10    filterRows();
11
12    searchInput.addEventListener('input', function() {
13        filterRows();
14    });
15
16    zoneDropdown.addEventListener('change', function() {
17        filterRows();
18    });
19
20    function filterRows() {
21        const searchValue = searchInput.value.trim().toLowerCase();
22        const selectedZone = zoneDropdown.value.toLowerCase();
23
24        tableRows.forEach(function(row) {
25            const barangay = row.children[0].textContent.toLowerCase();
26            const punongBarangay = row.children[1].textContent.toLowerCase();
27            const contact = row.children[2].textContent.toLowerCase();
28            const zone = row.children[3].textContent.toLowerCase();
29
30            const matchesSearch = (searchValue === '' || barangay.includes(searchValue) || punongBarangay.includes(searchValue) || contact.includes(searchValue));
31            const matchesZone = (selectedZone === 'all' || zone === selectedZone);
32
33            // Check if the row should be displayed based on the filter settings
34            if (matchesZone && matchesSearch) {
35                row.style.display = '';
36            } else {
37                row.style.display = 'none';
38            }
39        });
40    }
41});