https://datacarpentry.org/js/filters.js

1
2const placeholder = "Type to Filter by name or keyword"
3const inputClass = "search-input"
4const listClass = "filtered"
5var documentLoad = "DOMContentLoaded";
6document.addEventListener(documentLoad, function() {
7
8  let data
9  const dataElement = document.getElementById('filtersData')
10  if(dataElement) {
11    data = JSON.parse(dataElement.textContent)
12  }
13  const valueNames = [
14    "title",
15    "description",
16    "instructors",
17    "helpers",
18    {data: data.filters.map(f => f.key)},
19  ]
20  const filtersStart = () => Object.fromEntries(data.filters.map(f => [f.key, ""]))
21
22  var options = {
23    valueNames,
24    listClass,
25    searchClass: inputClass,
26    //page: 20,
27    //pagination: true
28  };
29  var userList = new List('filter', options);
30  userList.on('updated', (list) => {
31    const feedback = document.getElementById('list-feedback')
32    if(feedback) {
33      if(!list.matchingItems.length) {
34        feedback.style.display = "block"
35      } else {
36        feedback.style.display = "none"
37      }
38    }
39
40  })
41  const searchInput = document.querySelector('.search-input')
42  const filterSelects = document.querySelectorAll('select[name]')
43  const filterClear = document.getElementById('clear-filters')
44
45  let filters = filtersStart()
46  filterClear.addEventListener("click", () => {
47    filters = filtersStart()
48    searchInput.value = ""
49    filterSelects.forEach(select => {
50      select.value = "none"
51    })
52    userList.filter()
53    userList.search()
54
55  })
56  filterSelects.forEach(select => {
57    const filterKey = select.getAttribute('name')
58    select.addEventListener("change", function() {
59
60      if(!filters[filterKey].includes(this.value)) {
61        filters[filterKey] = ""
62        filters[filterKey] = this.value
63        userList.filter((item) => {
64          for (const atFilter in filters) {
65            if(!!filters[atFilter]) {
66              if(filters[atFilter] == "none") {
67                continue
68              }
69              else if(!!item.values()[atFilter] && item.values()[atFilter].includes(filters[atFilter])) {
70                continue
71              } else {
72                return false
73              }
74            } else {
75              continue
76            }
77          }
78          return true
79        })
80      }
81    })
82  })
83});
84